用PHP将网页上的Canvas图像保存到服务器上的方法

  • 8

在几年前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进行解码,保存成文件。我在上篇文章中提到的那个火狐浏览器的微博图文分享工具,在服务器端就是用到了这段代码。

有一天你也会需要用到它的,很有用的代码,收藏一下吧!

最新文章

  1. 一起阅读《Java多线程编程核心技术》
  2. Android Activity 管理 (AppManager)(非原创)
  3. 如何解决ajax跨域问题(转)
  4. 每天一个linux命令(47):traceroute命令
  5. SQL分组查询每组前几条数据
  6. Banner 广告设计技巧及经验(转自UI中国)
  7. C#通过OLEDB导出大数据到Excel
  8. java的版本区别、下载、配置
  9. Linux企业级项目实践之网络爬虫(7)——DNS解析
  10. Nginx 的 Echo 模块 —— echo-nginx-module(转)
  11. WPF 各种基础动画实现
  12. Android Q 变更和新特性
  13. 代码修改WinForm datagridview 样式 及数据绑定
  14. hibernate多对多映射文件的配置
  15. js——数组操作
  16. SpringBoot配置(1) 配置文件application&amp;yml
  17. python模块:datetime
  18. PAT 1066 图像过滤
  19. 逻辑卷管理LVM(logical volume manager)
  20. python运算符&amp;优先性

热门文章

  1. C#基础 base与this关键字
  2. HDFS要点
  3. 20155215 2016-2017-2 《Java程序设计》第10周学习总结
  4. 20155305乔磊2016-2017-2《Java程序设计》第四周学习总结
  5. 《Java 程序设计》课堂实践二
  6. Swift - 重写导航栏返回按钮
  7. day4 CSS属性操作
  8. OpenStack入门篇(六)之OpenStack环境准备
  9. lua 中的 loadfile、dofile和require的调用
  10. 现有新的iOS更新可用,请从iOS12 beta版进行更新.解决方案