html5canvas上传
A. 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程序设计有所帮助。
B. 如何上传 canvas 的 toDataURL 中的内容
经常需要在 web 前端生成图片然后上传到服务器上，在前端生成自定义图片可以使用 HTML5 中的 canvas ，然后使用 canvas 的 toDataURL 获得图片内容数据。但如果要上传该图片内容，因为使用字符串形式提交有长度限制， 所以还需要将这些字符串形式的内容转为二进制内容的 Blob 对象
C. 如何使用HTML5实现拍照上传应
在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器。
1、 视频流
HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源（请注意目前仅Chrome和Opera支持getUserMedia。补充：请使用Opera支持HTML5的新版本，如果是Chrome，版本需为Chrome 18.0.1008+，并使用about:flags来开启WebRTC，请看下图）。
[html] view plain
<video id="video" autoplay=""></video>
<script>
var video_element = document.getElementById('video');
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
navigator.getUserMedia('video',success, error);
}
function success(stream) {
video_element.src =stream;
}
</script>
2、 拍照
拍照功能，我们采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入，这一点很棒。主要代码如下：
[html] view plain
<script>
var canvas =document.createElement('canvas');
var ctx = canvas.getContext('2d');
var cw = vw;
var ch = vh;
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, cw, ch);
ctx.drawImage(video_element, 0, 0, vvw,vvh, 0,0, vw,vh);
document.body.append(canvas);
</script>
3、 图片获取
下面我们要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
[html] view plain
var imgData =canvas.toDataURL("image/png");
因为真正图像数据是base64编码逗号之后的部分，所以我们实际服务器处理的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
[html] view plain
var data = imgData.substr(22);
如果要在上传前获取图片的大小，可以使用：
[html] view plain
var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding
第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里：
[html] view plain
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时：
[html] view plain
$.post('upload.php',{ 'data' : data } );
在后台我们用PHP脚本接收数据并存储为图片。
[html] view plain
function convert_data($data){
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
save_to_file($image);
}
function save_to_file($image){
$fp = fopen($filename, 'w');
fwrite($fp, $image);
fclose($fp);
}
请注意，以上的解决方案不仅能用于Web App拍照上传，并且你可以实现把Canvas的输出转换为图片上传的功能。这样你可以使用Canvas为用户提供图片编辑，例如裁剪、上色、涂鸦的画板功能，然后把用户编辑完的图片保存到服务器上。
D. 浏览器不支持html5 canvas怎么解决
浏览器不支持这个的话，那么可能是因为你这个了解不合适，所以的话你可以去下载一个其他的浏览器，然后再输入这个网址就可以了。
E. HTML5里canvas的操作
说下思路 在给个简单的代码. 首先先画好线. 要平移实际上是 将线重新画一次 不是直接一个translate就好了的.再次你要理解save和restore()方法 code
<canvas id="canvas" width="700" height="550" style="border:1px solid #d3d3d3;"></canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function lines(ctx){
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(30,50);
ctx.lineTo(50,70);
ctx.lineTo(120,190);
ctx.stroke();
}
lines(ctx);
document.getElementById("canvas").addEventListener("click",function(){
ctx.save();
ctx.clearRect(0,0,700,550);
ctx.translate(50,50);
lines(ctx);
ctx.restore();
},false)
</script>
F. 如何使用HTML5实现利用摄像头拍照上传功能
一，直接上可以代码参考下：
<script>
//判断浏览器是否支持HTML5 Canvas
window.onload = function () {
try {
//动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持 document.createElement("canvas").getContext("2d");
document.getElementByIdx("support").innerHTML = "浏览器支持HTML5 CANVAS";
}
catch (e) {
document.getElementByIdx("support").innerHTML = "浏览器不支持HTML5 CANVAS";
}
};
//这段代 主要是获取摄像头的视频流并显示在Video 签中
window.addEventListener("DOMContentLoaded", function () {
var canvas = document.getElementByIdx("canvas"),
context = canvas.getContext("2d"),
video = document.getElementByIdx("video"),
videoObj = { "video": true },
errBack = function (error) {
console.log("Video capture error: ", error.code);
};
//navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
//这个是拍照按钮的事件，
$("#snap").click(function () {
context.drawImage(video, 0, 0, 320, 320);
//CatchCode();
});
}, false);
//定时器
var interval = setInterval(CatchCode, "300");
//这个是 刷新上 图像的
function CatchCode() {
$("#snap").click();
//实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途
var canvans = document.getElementByIdx("canvas");
//获取浏览器页面的画布对象
//以下开始编 数据
var imgData = canvans.toDataURL();
//将图像转换为base64数据
var base64Data = imgData.substr(22);
//在前端截取22位之后的字符串作为图像数据
//开始异步上
$.post("uploadImgCode.ashx", { "img": base64Data }, function (data, status) {
if (status == "success") {
if (data == "OK") {
alert("二维 已经解析");
}
else {
// alert(data);
}
}
else {
alert("数据上 失败");
} }, "text");
}
</script>
二.最后的就是接收经过base64编码之后的图像文件了。
public void ProcessRequest (HttpContext context) {
string img;//接收经过base64编 之后的字符串
context.Response.ContentType = "text/plain";
try {
img =context.Request["img"].ToString();
//获取base64字符串
byte[] imgBytes = Convert.FromBase64String(img);
//将base64字符串转换为字节数组
System.IO.Stream stream = new System.IO.MemoryStream(imgBytes);
//将字节数组转换为字节流
//将流转回Image，用于将PNG 式照片转为jpg，压缩体积以便保存。
System.Drawing.Image imgae = System.Drawing.Image.FromStream(stream);
imgae.Save(context.Server.MapPath("~/Test/") + Guid.NewGuid().ToString()+".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);//保存图片
context.Response.Write("OK");//输出调用结果
} catch (Exception msg) {
img = null;
context.Response.Write(msg);
return;
}
}
G. html5 canvas在线生成图片后怎么样保存到数据库(服务器端)而不是本地
canvas画布保存为图片：
functionconvertCanvasToImage(canvas){
varimage=newImage();
image.src=canvas.toDataURL("image/png");
returnimage;canvas参数为你的canvas对象，返回一个图片对象，你可以将这个image放到网页结构中，如果要保存图像，可以将canvas.toDataURL("image/png")返回的base64格式的图片数据放到input（type=hidden）中，用户点击上传按钮（或设置表单自动提交），将base64格式的数据上传
形如：
data:image/png;base64,/oMwlEs8yMgvJVcjyMbSYaERogCC0/kYEBAG/wdxC2W2tUAAAAAElFTkSuQmCC
服务器端接收到字符串（以上字符串可以直接在浏览器中打开，IE低版本就算了，能用canvas的浏览器都可以）后根据data:image/png得知应该保存的文件类型扩展名（png），然后将base64,后面的base64编码字符串解码(后端语言实现，如PHP用base64_decode()函数)，将解码后的二进制数据以二进制的形式保存到服务器上（图片形式）
如果存数据库，可以直接存base64编码，读取时候解码也行，图片建议以文件形式存储，数据库不适合存大文件