html2canvas 引入跨域圖片時報錯, base64 報錯。

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();

        });