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手册及PHP编程标准
Dec 17 PHP
实用函数7
Nov 08 PHP
PHP以指定字段为索引返回数据库所取的数据数组
Jun 30 PHP
PHP同时连接多个mysql数据库示例代码
Mar 17 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
Apr 21 PHP
php+ajax实现无刷新分页
Nov 18 PHP
win7安装php框架Yii的方法
Jan 25 PHP
php实现基于PDO的预处理示例
Mar 28 PHP
php str_getcsv把字符串解析为数组的实现方法
Apr 05 PHP
PHP fprintf()函数用法讲解
Feb 16 PHP
Laravel自动生成UUID,从建表到使用详解
Oct 24 PHP
PHP编程一定要改掉的5个不良习惯
Sep 18 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
神族 Protoss 历史背景
2020/03/14 星际争霸
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
77A一级收信机修理记
2021/03/02 无线电
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
JS继承 笔记
2011/07/13 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
Python import自定义模块方法
2015/02/12 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
保密协议书范本
2014/04/22 职场文书
教师求职简历自我评价
2015/03/10 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python