canvas 導出圖片網絡失敗的故障排除

使用html2canvas??截圖并下載圖片時,出現下載失敗, 網絡錯誤

經過 分析 排查,是因為canvas.toDataURL('image/png')?這方法生成的base64的字符太大, 導致無法解析.

通過查看?MDN HTMLCanvasElement 文檔詳情?知道了canvas 還有一個方法直接轉化為Blob

主要方法為

canvas.toBlob() // canvas 轉blob

URL.createObjectURL() // blob生產url

最終代碼如下

html2canvas(document.querySelector('.fizz_inject_wrap_div')).then(function(canvas) {

canvas.toBlob(function (blob) {

const eleLink = document.querySelector('#fizz_rm_down_link');

eleLink.download = pageTitle + '.png';

eleLink.style.display = 'none';

// 字符內容轉變成blob地址

eleLink.href = URL.createObjectURL(blob);

// 觸發點擊

eleLink.click();

},'image/png',1)

})

順利下載圖片

Canvas 網絡

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。