html-canvas轉存為圖片
阿新 • • 發佈:2019-01-30
有時候,我們繪製好的canvas想儲存為本地圖片,該怎麼做呢?canvas提供了一個重要的方法toDataURL(),這個方法能把畫布裡的圖案轉變成base64編碼格式的png或者其他格式的圖片(根據你傳入的mine型別的引數),然後返回 Data URL資料。接下來我們看具體是怎麼實現的。
html頁面一個canvas畫布:
<canvas id="canvas"></canvas>
<button class="button-balanced" id="save">save</button>
<br />
<a href ="" download="canvas_love.png" id="save_href">
<img src="" id="save_img"/>
</a>
對應的js程式碼實現:
var c=document.getElementById("canvas");
function drawLove(canvas){
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle="#E992B9";
ctx.moveTo(75,40);
ctx.bezierCurveTo(75 ,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
}
drawLove(c);
var butSave = document.getElementById("save" );
butSave.onclick=function(){
var svaeHref = document.getElementById("save_href");
/*
* 傳入對應想要儲存的圖片格式的mime型別
* 常見:image/png,image/gif,image/jpg,image/jpeg
*/
var img = document.getElementById("save_img");
var tempSrc = canvas.toDataURL("image/png");
svaeHref.href=tempSrc;
img.src=tempSrc;
};
點選save按鈕後,顯示圖片,點選圖片即可彈出下載對話方塊。
效果如下: