有些線上圖檔網站,進行圖像處理比如去除背景後,結果圖檔是以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");
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5SZhJWYlVWNiNDOjljY0ETO5EzM0E2M1MWNkdTZjZWM58CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)