首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >canvas 导出图片网络失败的故障排除

canvas 导出图片网络失败的故障排除

作者头像
拿我格子衫来
发布于 2022-01-24 17:57:21
发布于 2022-01-24 17:57:21
1.6K0
举报
文章被收录于专栏:TopFETopFE

使用html2canvas 截图并下载图片时,出现下载失败, 网络错误

经过 分析 排查,是因为canvas.toDataURL('image/png') 这方法生成的base64的字符太大, 导致无法解析.

通过查看 MDN HTMLCanvasElement 文档详情 知道了canvas 还有一个方法直接转化为Blob

主要方法为

代码语言:javascript
复制
canvas.toBlob()  // canvas 转blob

URL.createObjectURL() // blob生产url

最终代码如下

代码语言:javascript
复制
 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)
    })

顺利下载图片

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档