PHP实现将HTML5中Canvas图像保存到服务器的方法
本文实例讲述了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程序设计有所帮助。
相关推荐
-
使用canvas进行图像编辑的实例
前面的话 本文将分为几个小功能的形式来详细介绍canvas图像编辑 缩放 下面是一张分析图,假设默认情况下,图片和canvas宽高相同.图片的缩放(scale)范围为0.5到3,缩放时改变的是图片的大小和图片的坐标位置 W(宽) = canvas.width * scale H(高) = canvas.height * scale x坐标 = (W - canvas.width)/2; y坐标 = (H - canvas.height)/2; 因此,代码如下 <canvas id="dra
-
canvas实现图像截取功能
本文实例为大家分享了canvas图像截取的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-图像截取</title> <style> canvas{ border: 1px dashed red; float: left; position: r
-
Android开发之图形图像与动画(一)Paint和Canvas类学习
Paint类 *Paint类代表画笔,用来描述图形的颜色和风格,如线宽,颜色,透明度和填充效果等信息. *使用Paint类时,需要先创建该类的对象,可以通过该类的构造函数实现.通常情况的实现代码是: *Paintpaint=newPaint(); *创建完Paint对象后,可以通过该对象提供的方法对画笔的默认设置进行改变 Canvas *Canvas类代表画布,通过该类提供的构造方法,可以绘制各种图形. *通常情况下,要在Android中绘图,需要先创建一个继承自View类的视图,并且在该类中重
-
canvas实现图像布局填充功能
本文实例为大家分享了canvas图像布局填充的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-图像布局填充</title> <style> #canvas{ border: 1px solid palevioletred; } </sty
-
js canvas实现简单的图像扩散效果
本文实例为大家分享了canvas实现简单图像扩散的代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;"> Your browser does not support the canv
-
canvas实现图像放大镜
本文实例为大家分享了canvas实现图像放大镜的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-放大镜</title> <style> body{ padding: 0px; margin: 0px; } #canvas{ border: 1p
-
PHP实现将HTML5中Canvas图像保存到服务器的方法
本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名.这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意见页,页面最下部有个方块区域,用户在这里用触摸笔进行签名,然后这个签名将会保持的服务器上. 这样的一个需求在当时是让我大费周折,但如今想起来,如果用html5的canvas
-
JS中使用变量保存arguments对象的方法
迭代器(iterator)是一个可以顺序存取数据集合的对象.其一个典型的API是next方法.该方法获得序列中的下一个值. 迭代器示例 题目:希望编写一个便利的函数,它可以接收任意数量的参数,并为这些值建立一个迭代器. 测试代码好下: var it=values(,,,,,,,,); it.next();// it.next();// it.next();// 分析:由于values函数需要接收任意多个参数,这里就需要用到上一节讲到的构建可变参数的函数的方法.然后里面的迭代器对象来遍历argum
-
js+html5实现canvas绘制镂空字体文本的方法
本文实例讲述了js+html5实现canvas绘制镂空字体文本的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not s
-
在python tkinter中Canvas实现进度条显示的方法
如下所示: from tkinter import * import time #更新进度条函数 def change_schedule(now_schedule,all_schedule): canvas.coords(fill_rec, (5, 5, 6 + (now_schedule/all_schedule)*100, 25)) root.update() x.set(str(round(now_schedule/all_schedule*100,2)) + '%') if round(
-
iOS中利用KeyChain保存用户信息的方法示例
前言 说到保存用户名和密码,以前有用过本地的数据库来保存,也接触过用userdefault来保存,后来在一个项目中发现了一个新的方法--用Keychain来保存.下面话不多说了,直接通过示例代码来介绍吧. 方法示例 一.新建一个LYKeychainTool类,导入系统Security框架 ,LYKeychainTool.h文件实现如下: // // LYKeychainTool.h // keyChainTest // // Created by Liyu on 2017/6/2. // Cop
-
nginx中文件下载指定保存文件名的配置方法
一般在我们上传完资源文件之后,为了避免文件名冲突,会将文件名改成毫无意义的一段字符.这个字符,可能是MD5产生的,或者是其他方式产生的字符串.这时候,下载的时候,默认保存的文件名会是这段毫无意义的文件名(图1). 其实,nginx是支持下载时重命名的,让文件名更加友好. nginx也很容易配置:只要加入以下几行即可: 复制代码 代码如下: location ~* .*\.(doc|txt|jar|zip|apk)(\?.*)?$ { if ($request_uri ~* ^.*
-
iOS将相册中图片上传至服务器的方法
本文为大家分享了iOS图片上传至服务器的具体代码,供大家参考,具体内容如下 在使用app时,从相册中选取图片作为头像是很常用的操作,首先打开相册选择图片,然后将图片保存至本应用的document,最后将document中图片的路径保存至NSUserDefaults和服务器. 从相册中选取图片或拍照 //从相册中选取图片或拍照 - (void)btnActionForEditPortrait:(id) sender { UIImagePickerController *picker = [[UII
-
浅谈Golang中创建一个简单的服务器的方法
我们知道,golang中的net/http包对网络的支持非常好,这样会让我们比较容易的建立起一个相对简单的服务器,我们来看一段代码 func sayHi(w http.ResponseWriter, r *http.Request) { fmt.Fprint(w,"Hi") } func main() { http.HandleFunc("/sayHi", sayHi) log.Fatal(http.ListenAndServe("localhost:80
-
C++将CBitmap类中的图像保存到文件的方法
本文实例讲述了C++将CBitmap类中的图像保存到文件的方法.分享给大家供大家参考.具体实现方法如下: 使用下面的代码,可以把CBitmap类中的图像保存到图像文件中.支持格式:BMP.JPG.GIF和PNG. void SaveBitmap(CString strFilePath, CBitmap Bitmap) { if ( Bitmap.m_hObject ) { CImage imgTemp; // CImage是MFC中的类. imgTemp.Attach(Bitmap.operat
-
小程序中canvas的drawImage方法参数使用详解
最近在开发小程序,海报生成的过程中,要在carvas中不断去添加图片,对小程序的drawImage参数不是很明确,这次解惑. 示例代码 有三个版本的写法: drawImage(imageResource, dx, dy) drawImage(imageResource, dx, dy, dWidth, dHeight) drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持 co
随机推荐
- 解析AngularJS中get请求URL出现的跨域问题
- 25个常用PowerShell命令总结
- js时间戳格式化成日期格式的多种方法
- js操作模态窗口及父子窗口间相互传值示例
- 原生js操作checkbox用document.getElementById实现
- JavaScript截屏功能的实现代码
- php smarty模版引擎中的缓存应用
- js 将图片连接转换成base64格式的简单实例
- 深入多线程之:内存栅栏与volatile关键字的使用分析
- z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
- 基于HTML5 Ajax实现文件上传并显示进度条
- 利用onresize使得div可以随着屏幕大小而自适应的代码
- Fabric 应用案例
- PHP实现MySQL更新记录的代码
- PHP中常用的魔术方法
- Python与C++ 遍历文件夹下的所有图片实现代码
- jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
- 浅谈vue-router 路由传参的方法
- 详解原生JS回到顶部
- python selenium 对浏览器标签页进行关闭和切换的方法