admin管理员组

文章数量:1572326

使用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

版权声明：本文标题：canvas 导出图片网络失败的故障排除 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1727723530a1126994.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。