有時候,我們繪製好的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按鈕後,顯示圖片,點擊圖片即可跳出下載對話框。
效果如下:
以上是canvas轉存為圖片實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!