用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. bootstrap 分页
  2. cocos基础教程(12)点击交互的三种处理
  3. 采用HSV生成随机颜色
  4. Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) B
  5. 安装elasticsearch
  6. Android之开发杂记(三)
  7. 常用的Linux发行版
  8. day5(字符编码、数据类型、列表基本操作)
  9. LintCode题解之比较字符串
  10. CodeForces - 589A(字符串处理)
  11. VTK使用矢量数据弯曲几何体
  12. 一、Windows许可证即将过期怎么办
  13. 数据正规化 (data normalization) 的原理及实现 (Python sklearn)
  14. Spring boot FastJson
  15. 函数使用三:采购过账BAPI_GOODSMVT_CREATE
  16. C语言中内存分配问题:
  17. epel [Errno 14] problem making ssl connection
  18. hive学习(四) hive的函数
  19. react创建新项目并且修改配置文件
  20. &lt;2014 05 09&gt; Lucida:我的算法学习之路

热门文章

  1. jade
  2. 20155315 2016-2017-2 《Java程序设计》第一周学习总结
  3. # C语言假期学习笔记——6
  4. 20155339 2016-2017-2 《Java程序设计》第3周学习总结
  5. 使用cursor递归遍历sqlserver的相应表
  6. MySQL优化Explain命令简介(一)
  7. set get方法诡异的空指针异常
  8. The filename 未命名.ipa in the package contains an invalid character(s). The valid characters are: A-Z, a-z, 0-9, dash, period, underscore, but the name cannot start with a dash, period, or underscore
  9. 牛客小白月赛9 A签到(分数取模,逆元)
  10. 第五篇 Postman离线安装interceptor插件---Chrome app及录制请求