PHP中的HTML5应用 将Canvas图像保存到服务器

        在几年前HTML5尚未流行的时候,咱们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这须要咱们评审软件里提供这样一个功能:打开浏览器,登陆,进入评审意见页,页面最下部有个方块区域,用户在这里用触摸笔进行签名,而后这个签名将会保持的服务器上。php

        这样的一个需求在当时是让我大费周折,但现在想起来,若是用html5的canvas实现,真是太简单了。在《将画布(canvas)图像保存成本地图片的方法》这篇文章里就有一个只用了几行代码就实现了的画板功能——很简单,虽然有一个小bug——但彻底能看成签名用。html

        我以前说了不少如何将canvas图像保存成图片并下载的方法,但这些方法都是将图片保存到客户端,而咱们的签名需求是须要将canvas的内容保存到服务器端,如何实现?html5

        其实很简单,看完下面的这段PHP代码,相信你也会以为很简单。canvas

<?php
	// requires php5
	define('UPLOAD_DIR', 'images/');
	$img = $_POST['img'];
	$img = str_replace('data:image/png;base64,', '', $img);
	$img = str_replace(' ', '+', $img);
	$data = base64_decode($img);
	$file = UPLOAD_DIR . uniqid() . '.png';
	$success = file_put_contents($file, $data);
	print $success ? $file : 'Unable to save the file.';
?>

        从网页上传到服务器端的图片是base64_encode转码过的Data URL格式,数据在服务器端用base64_decode进行解码,保存成文件。我在上篇文章中提到的那个火狐浏览器的微博图文分享工具,在服务器端就是用到了这段代码。浏览器

        有一天你也会须要用到它的,颇有用的代码,收藏一下吧!服务器

相关文章
相关标签/搜索