轉換 Image 為 Canvas
要把圖片轉換為Canvas(畫板,畫布),可以使用canvas元素 context 的drawImage方法:
// 把image 轉換為 canvas對象 function convertImageToCanvas(image) { // 創建canvas DOM元素,并設置其寬高和圖片一樣 var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; // 坐標(0,0) 表示從此處開始繪制,相當于偏移。 canvas.getContext("2d").drawImage(image, 0, 0); return canvas; }
轉換 Canvas 為 Image
假設圖像已經在canvas上處理好,那么可以使用以下方法,把canvas轉變為圖片Image對象。
// 從 canvas 提取圖片 image function convertCanvasToImage(canvas) { //新Image對象,可以理解為DOM var image = new Image(); // canvas.toDataURL 返回的是一串Base64編碼的URL,當然,瀏覽器自己肯定支持 // 指定格式 PNG image.src = canvas.toDataURL("image/png"); return image; }