在几年前 html5 还没有流行的时候, 我们的项目经理曾经向我提出这样一个需求: 让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名. 这需要我们评审软件里提供这样一个功能: 打开浏览器, 登录, 进入评审意见页, 页面最下部有个方块区域, 用户在这里用触摸笔进行签名, 然后这个签名将会保持的服务器上.
这样的一个需求在当时是让我大费周折, 但如今想起来, 如果用 html5 的 canvas 实现, 真是太简单了. 在《将画布 (canvas) 图像保存成本地图片的方法》这篇文章里就有一个只用了几行代码就实现了的画板功能 -- 很简单, 虽然有一个小 bug-- 但完全能当作签名用.
我之前说了很多如何将 canvas 图像保存成图片并下载的方法, 但这些方法都是将图片保存到客户端, 而我们的签名需求是需要将 canvas 的内容保存到服务器端, 如何实现?
其实很简单, 看完下面的这段 PHP 代码, 相信你也会觉得很简单.
- <?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 进行解码, 保存成文件. 我在上篇文章中提到的那个火狐浏览器的微博图文分享工具, 在服务器端就是用到了这段代码.
有一天你也会需要用到它的, 很有用的代码, 收藏一下吧!
来源: http://www.webhek.com/post/canvas-save-to-server.html