html2canvas 引入跨域图片时报错, base64 报错。

jdk137

于 2020-01-14 16:26:04 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/jdk137/article/details/103975281

js 专栏收录该内容

11 篇文章

订阅专栏

在使用html2canvas生成动态分享图片时，遇到跨域和base64错误。通过设置allowTaint和useCORS为true，可以避免这个问题，允许加载外链图片并成功导出base64。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

https://github.com/niklasvh/html2canvas/issues/1614

朋友圈h5需要动态生成一些长按分享的图片，用html2canvas最合适不过。但是经常会报错。

总结下来，发现引入两个参数就可以了。
allowTaint: true, // 生成包含外链图片的canvas时不报错
useCORS: true // 生成base64时不报错

        var $tmp = $('<div></div>').addClass('tmp');
        $tmp.appendTo($('body'));
        var $a = $('#result .top').clone().appendTo($tmp); 
        html2canvas($tmp[0], {
          allowTaint: true,
          useCORS: true
          // foreignObjectRendering: true
        }).then(canvas => {
          // $('#result .top').append(canvas);
          var b64;
          try {
            b64 = canvas.toDataURL("image/png");
          } catch (err) {
            console.log(err);
            alert(err);
          }

          var img = new Image();
          img.src = b64;
          var $img = $(img).addClass('canvas').css({
            'opacity': 0.001,
            'width': '100%'
          });
          $('#result .top').append($img);
          $tmp.remove();

        });