本文向您展示怎樣轉(zhuǎn)換Image為canvas，以及canvas如何提取出一個Image悄谐。 轉(zhuǎn)換 Image為 Canvas 要把圖片轉(zhuǎn)換為Canvas(畫板，畫布),可以使用canvas元素 context 的drawImage方法： 復(fù)制代碼
代碼如下:
// 把image 轉(zhuǎn)換為 canvas對象
function convertImageToCanvas(image) {
// 創(chuàng)建canvas DOM元素库北，并設(shè)置其寬高和圖片一樣
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
// 坐標(biāo)(0,0) 表示從此處開始繪制爬舰，相當(dāng)于偏移们陆。
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
轉(zhuǎn)換 Canvas 為 Image 假設(shè)圖像已經(jīng)在canvas上處理好，那么可以使用以下方法洼专，把canvas轉(zhuǎn)變?yōu)閳D片Image對象棒掠。
代碼如下:
// 從 canvas 提取圖片 image
function convertCanvasToImage(canvas) {
//新Image對象，可以理解為DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64編碼的URL屁商，當(dāng)然,瀏覽器自己肯定支持
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}
額!圖像image和canvas的互相轉(zhuǎn)換比你想象的還要容易,以后我將向你演示不同的圖像處理技術(shù)烟很，相信在未來你肯定能用這些技術(shù)賺到大錢。
項目做到一個裁切圖片的功能蜡镶，就是讓用戶上傳頭像的時候可以裁切一下圖片雾袱，選擇一個合適大小位置來作為頭像。之中用到了crop.js這個插件官还，用canvas直接繪制了用戶裁切縮放后的圖片芹橡。裁切的過程這邊就不詳細展開了，想要了解詳情的朋友可以深入了解一下crop.js插件望伦，這邊分享一下在生成canvas圖片后林说，通過ajax來上傳到服務(wù)器的一個過程。就以PHP為例：
[圖片上傳中屯伞。腿箩。。（1）]
<script>var canvas = document.getElementById("canvas_img");var img = canvas.toDataURL();var ajax = null; if (window.XMLHttpRequest) { ajax = new XMLHttpRequest();} else { ajax = new ActiveXObject("Microsoft.XMLHTTP");}ajax.onreadystatechange = function() { if (ajax.readyState == 4 && ajax.status == 200) { alert(ajax.responseText); }}ajax.open("POST", "save.php", true);ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");ajax.send("img=" + img);</script>
[圖片上傳中劣摇。珠移。。（2）]
[圖片上傳中末融。钧惧。。（3）]
<?php define('UPLOAD_DIR', dirname(FILE).'/'); //圖片保存路徑 $img = $_POST['img']; $img = str_replace('data:image/png;base64,', '', $img); $img = str_replace(' ', '+', $img); $data = base64_decode($img); $day = date("Ymd",time()); $file_name = mt_rand(1000000000000000,9999999999999999); if(!is_dir(UPLOAD_DIR . $day)){ mkdir(UPLOAD_DIR . $day); } $file = UPLOAD_DIR . $day."/".$file_name. '.png'; $success = file_put_contents($file, $data); return $success;?>
