文档章节

PHP中的HTML5应用 将Canvas图像保存到服务器

lotozhou
 lotozhou
发布于 2015/12/12 14:20
字数 482
阅读 332
收藏 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进行解码,保存成文件。我在上篇文章中提到的那个火狐浏览器的微博图文分享工具,在服务器端就是用到了这段代码。

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


lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
加载中
请先登录后再评论。
如何使用HTML5实现拍照上传应用

在HTML5规范的支持下,WebApp在手机上拍照已经成为可能。在下面,我将讲解Web App如何用手机进行拍照,显示在页面上并上传到服务器。 1、 视频流 HTML5 The Media Capture API提供了对摄像头...

彭博
2012/04/12
1.7K
0
canvas与svg的区别有什么?canvas和svg的区别比较

canvas与svg都是可以在浏览器上创建图形,因此,在html5中感觉canvas和svg很相似,但是实际上canvas与svg有着根本的区别。下面php中文网通过比较canvas和svg之间的不同来给大家总结了关于can...

osc_57h7mkgj
01/14
5
0
华丽丽的HTML5新特性

Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣。作为下一代互联网标准,HTML5自然也是备受期待和瞩目,技 术人员、设计者、互联网爱好者们都在热议HTML5究竟能带来...

小编辑
2011/07/13
1.2K
1
前端知识点总结——H5

前端知识点总结——H5 1.html5新特性 (1)新的语义标签(2)增强型表单*(3)音频和视频(4)Canvas绘图(5)SVG绘图(6)地理定位(7)拖动API(8)Web Worker(9)Web Storage(10)Web Socket 2.增强型表单 ...

南云编程
2019/07/10
0
0
前端知识点总结——H5

前端知识点总结——H5 1.html5新特性 (1)新的语义标签(2)增强型表单*(3)音频和视频(4)Canvas绘图(5)SVG绘图(6)地理定位(7)拖动API(8)Web Worker(9)Web Storage(10)Web Socket 2.增强型表单 ...

智云编程
2019/06/20
11
0

没有更多内容

加载失败,请刷新页面

加载更多

插入,在PostgreSQL中重复更新吗? - Insert, on duplicate update in PostgreSQL?

问题: Several months ago I learned from an answer on Stack Overflow how to perform multiple updates at once in MySQL using the following syntax: 几个月前,我从关于堆栈溢出的答案......

技术盛宴
27分钟前
20
0
互联网的寒冬下各大一线互联网公司还在用SpringBoot这是为什么?

引言 现在各大技术社区 Spring Boot 的文章越来越多,Spring Boot 相关的图文、视频教程越来越多,使用 Spring Boot 的互联网公司也越来越多; Java 程序员现在出去面试, Spring Boot 已经成...

北柠Java
29分钟前
8
0
vue+elementui实现简易的列筛选功能实现。

一、简易效果图: 二、需求背景 大家都知道,后管类系统当中,有时一个列表可能有很多列需要展示,如下图所示,但是用户在使用系统的时候,往往会需要针对其中某几列进行数据提取,在展示列比...

一生懸命吧
32分钟前
60
0
批处理问题记录——数字实验bat

记录学习批处理时的问题 批处理为输入一个数字,如果大于等于一百,直接输出输入数字,如果小于一百会重复+1,直到100后输出。 问题是,如果不输入数字,直接空格的话,批处理会出错。 寻求一...

愤怒的乌老大
39分钟前
6
0
算法题汇总

计算两个字符串中的最大的相同字符串

佳幂小煜
49分钟前
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部