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編碼，讀取時候解碼也行，圖片建議以文件形式存儲，資料庫不適合存大文件