PHP实现将HTML5中Canvas图像保存到服务器的方法


Posted in PHP onNovember 28, 2014

本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法。分享给大家供大家参考。具体实现方法如下:

一、问题:

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

这样的一个需求在当时是让我大费周折,但如今想起来,如果用html5的canvas实现,真是太简单了。在《在HTML5 Canvas中放入图片和保存为图片的方法》这篇文章里就实现了这一功能。

二、解决方法:

之前说了很多如何将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进行解码,保存成文件。

或许有一天你也会需要用到它的,觉得很有用的话就收藏一下吧!

希望本文所述对大家的PHP程序设计有所帮助。

PHP 相关文章推荐
解析php时间戳与日期的转换
Jun 06 PHP
PHP操作MongoDB GridFS 存储文件的详解
Jun 20 PHP
如何在smarty中增加类似foreach的功能自动加载数据
Jun 26 PHP
php下载excel无法打开的解决方法
Dec 24 PHP
php学习笔记之基础知识
Nov 08 PHP
PHP中把对象数组转换成普通数组的方法
Jul 10 PHP
WordPress中获取所使用的模板的页面ID的简单方法
Dec 31 PHP
详解PHP实现异步调用的4种方法
Mar 14 PHP
简单理解PHP的面向对象编程方式
May 17 PHP
PHP内存缓存功能memcached示例
Oct 19 PHP
php自定义截取中文字符串-utf8版
Feb 27 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
Oct 15 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
Nov 28 #PHP
php的mssql数据库连接类实例
Nov 28 #PHP
smarty中post用法实例
Nov 28 #PHP
smarty简单入门实例
Nov 28 #PHP
php最简单的删除目录与文件实现方法
Nov 28 #PHP
php查找指定目录下指定大小文件的方法
Nov 28 #PHP
thinkphp四种url访问方式详解
Nov 28 #PHP
You might like
解决GD中文乱码问题
2007/02/14 PHP
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
了解重排与重绘
2019/05/29 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
Python实现简单截取中文字符串的方法
2015/06/15 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
python实现简单飞行棋
2020/02/06 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
毕业生简单求职信
2013/11/19 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
出纳员岗位职责
2014/03/13 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
用电申请报告范文
2015/05/18 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python