更多HTML 5文章請查閱HTML 6在線網站http://www.html5online.com.cn
本文概述
本文介紹如何在一個Web應用程序中利用HTML 5中的Canvas API創建、編輯、打開與輸出圖像。
檢測瀏覽器是否支持Canvas API
首先,我們需要檢測用戶瀏覽器是否對HTML 5中的Canvas API提供支持。一個簡單的方法是利用Modernizr工具來進行檢測,方法如下所示。
if (Modernizr.canvas) {
//瀏覽器支持Canvas API
}
else {
//瀏覽器不支持Canvas API,使用諸如Flash、靜態圖片等其他技術
}
通過URL地址或Data URI指定canvas元素中的圖像來源
在使用Canvas API的時候,我們首先需要在頁面上放置一個canvas元素。然後,我們可以在JavaScript腳本代碼中將一幅圖像繪製在該canvas元素中,代碼如下所示。
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = "images/sl.jpg";
img.onload = function () {
ctx.drawImage(img,0,0);
}
在這段代碼中,我們首先獲取頁面上canvas元素的圖形上下文對象,通過該對象來使用Canvas API中所定義的所有可用於繪圖的方法。接下來,我們創建一個Image對象並且將該對象的src屬性值定義爲canvas元素中所需要繪製圖像的URL地址,這將使得所需要繪製的圖像將被裝載在該Image對象中。當該圖像裝載完畢後,我們使用canvas元素的圖形上下文對象的drawImage方法將該圖像繪製在canvas元素中。
可以將該Image對象的src屬性值指定爲一個形式爲dataURI地址,代碼如下所示：
img.src="data:image/jpeg;base64,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"
你也許會問:"爲什麼需要使用dataURI地址?",這是因爲dataURI地址有一些自身的優勢,例如接下來我們馬上要介紹的如何將canvas元素中的圖形或圖像導出爲一個data URI地址。
將canvas元素中的圖像導出爲dataURI地址
canvas元素有一個toDataURL方法,該方法將導出圖像的MIME類型作爲唯一參數,代碼如下所示。
window.open(document.getElementById('canvas').toDataURL("image/jpeg"));
上面這行代碼將canvas元素中的圖像導出爲一個JPEG格式的圖像並且在新的瀏覽器窗口中打開該圖像。瀏覽器地址欄中顯示由canvas元素中的圖像生成的data
URI地址,瀏覽器將根據該data URI地址渲染窗口中的圖像。但是,對於用戶來說就好像在新的瀏覽器窗口中打開了該圖像。
另外請注意上面這行代碼必須被運行在一個Web服務器中。從本地文件系統中直接運行該代碼時瀏覽器將拋出錯誤。
將canvas元素中的圖像存儲在客戶端本地
通過HTML 5中提供的各種將數據存儲在客戶端本地的技術,我們可以很輕鬆地將canvas元素中的圖像存儲在客戶端本地。
例如通過如下所示的代碼,我們可以將canvas元素中的圖像存儲在WebStorage中。
localStorage.setItem('canvas', canvas.toDataURL("image/jpeg"));
通過如下所示的代碼,我們可以從WebStorage中取出被保存的圖像。
localStorageImage = new Image();
canvas=document.getElementById('canvas');
ctx=canvas.getContext('2d');
localStorageImage.onload = function ()
{
ctx.drawImage(image,0,0);
}
localStorageImage.src = localStorage.getItem('canvas');
將canvas元素中的圖像上傳到服務器端
有時,你可能想將canvas元素中的圖像上傳到服務器端。這時,我們可以首先利用canvas元素的toDataURL方法將canvas元素中的圖像輸出爲一個data
URI地址,然後將該地址上傳到服務器端。該地址分爲兩部分,中間用逗號分割,其中第一部分爲“data:”+導出圖像的MIME類型+“;base64”,第二部分爲一個經過base64編碼的字符串,在服務器端將其解碼後即得到該圖像的原始二進制數據,可以將其保存爲圖像文件,代碼如下所示：
var data=canvas.toDataURL("image/jpeg");
var xhr = new XMLHttpRequest();
xhr.open("POST", "uploadImage.php");
xhr.send(data);
服務器端保存圖像文件的代碼如下所示：
<?php
$data= $GLOBALS['HTTP_RAW_POST_DATA'];
$contents_split = explode(',',$data);
$encoded = $contents_split[count($contents_split)-1];
$decoded = "";
for ($i=0; $i < ceil(strlen($encoded)/256); $i++) {
$decoded = $decoded . base64_decode(substr($encoded,$i*256,256));
}
$file=fopen("test.jpg","w");
fwrite($file,$decoded);
fclose($file);
?>