有些在線圖片網站，進行圖像處理比如去除背景后，結果圖片是以html5里canvas標簽的形式顯示出來的，我們沒有辦法通過右鍵點擊圖片然后下載的方式去保存到本地。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2MCDwD0b-1576403460274)(https://user-images.githubusercontent.com/5669954/70596472-f8fbbc80-1c20-11ea-89f8-41877854ea9f.png)]

此時使用Chrome開發者工具，定位到canvas標簽，

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CmxUcgp9-1576403460276)(https://user-images.githubusercontent.com/5669954/70596466-f6996280-1c20-11ea-8516-1a3ff8d4c3bc.png)]

Chrome開發者工具console里的$0代表當前選中的canvas元素。
執行下面的JavaScript：

var image = new Image(); image.src = $0.toDataURL("image/png");

var binary = pageData.replace("image/jpeg", "image/octet-stream"); var save_link = document. createElementNS ('http://www.w3.org/1999/xhtml,, 'a'); save_link.href = binary; save_link.download = "1.jpg"; var event = document.create("MouseEvents"); event.initMouseEvent('click', true, false, window, o, o, o, e, o, false, false, false, false, o, null); save_link.dispatchEvent(event); //觸發事件

圖片下載成功：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的把canvas标签里的图像下载成本地图片文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。