1. 程式人生 > >html-canvas轉存為圖片

html-canvas轉存為圖片

  有時候,我們繪製好的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按鈕後,顯示圖片,點選圖片即可彈出下載對話方塊。
效果如下:
這裡寫圖片描述