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程序设计有所帮助。

赞 (0)

相关推荐

  • 使用canvas进行图像编辑的实例

    使用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类学习

    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对象的方法

    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保存用户信息的方法示例

    iOS中利用KeyChain保存用户信息的方法示例

    前言 说到保存用户名和密码,以前有用过本地的数据库来保存,也接触过用userdefault来保存,后来在一个项目中发现了一个新的方法--用Keychain来保存.下面话不多说了,直接通过示例代码来介绍吧. 方法示例 一.新建一个LYKeychainTool类,导入系统Security框架 ,LYKeychainTool.h文件实现如下: // // LYKeychainTool.h // keyChainTest // // Created by Liyu on 2017/6/2. // Cop

  • nginx中文件下载指定保存文件名的配置方法

    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

随机推荐