PHP中的HTML5应用 将Canvas图像保存到服务器
2015-12-12 14:36
459 查看
在几年前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进行解码,保存成文件。我在上篇文章中提到的那个火狐浏览器的微博图文分享工具,在服务器端就是用到了这段代码。
有一天你也会需要用到它的,很有用的代码,收藏一下吧!
这样的一个需求在当时是让我大费周折,但如今想起来,如果用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进行解码,保存成文件。我在上篇文章中提到的那个火狐浏览器的微博图文分享工具,在服务器端就是用到了这段代码。
有一天你也会需要用到它的,很有用的代码,收藏一下吧!
相关文章推荐
- 使用chrome调试H5页面的方法
- h5学习笔记(2)this 、循环赋值引用问题
- PHP中的HTML5应用 将Canvas图像保存到服务器
- 推荐阅读——MSDN有关html5两种矢量图形技术对边
- 用HTML5让传统企业应用可视化
- 『HTML5梦幻之旅』 - 动感圆圈
- HTML5 缓存
- HTML5 总结 (1)
- 比 H5 应用多一点原生应用小一点,流应用能不能将 H5 应用真正推广起来?
- html5 websocket 简单实现
- 创造更好的浏览体验-HTML5 history API
- Html5(1)
- 使用HTML5来实现本地文件读取和写入
- html5 图片上传版本1.0
- Html5进度条插件(自写)
- h5制作案例分享 路易威登系列二:展示的不仅仅是一场时装秀
- 用HTML5打造本地桌面应用
- 使用Flexible 实现手淘H5 页面的终端适配学习
- 打造H5动感影集的爱恨情仇(动画性能篇)
- 利用html5看雪花飘落的效果