avaScript將圖片轉畫布,用JavaScript將畫布保持成圖片格式
阿新 • • 發佈:2019-01-04
使用JavaScript將圖片拷貝進畫布
要想將圖片放入畫布裡,我們使用canvas元素的drawImage
方法:
// Converts image to canvas; returns new canvas element function convertImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); return canvas; }
這裡的0, 0
引數畫布上的座標點,圖片將會拷貝到這個地方。
用JavaScript將畫布保持成圖片格式
如果你的畫布上的作品已經完成,你可以用下面簡單的方法將canvas資料轉換成圖片格式:
// Converts canvas to an image function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; }
這段程式碼就能神奇的將canvas轉變成PNG格式!