如何在jQuery中使用画布将图像转换为图像

时间:2019-04-18 10:23:47

标签: jquery html html5 image html2canvas

我正在尝试使用html2canvas库将HTML div的屏幕快照上传到imgur中。我收到以下错误

  

未捕获(承诺)的DOMException:无法在“ HTMLCanvasElement”上执行“ toDataURL”:可能无法导出污染的画布。

实际上,HTML div具有一些外部图像(其他域)。可能是CORS问题,但不知道如何纠正。

$(document).ready(function() {
  $("#capture").click(function() {
    html2canvas($('#mycontainer').get(0), {
      logging: true,
      allowTaint: true,
      useCORS: true,
      proxy: '<?=base_url()?>html2canvasproxy',
      background: '#FFFFFF'
    }, {}).then(function(canvas) {
      //dataURL= canvas.toDataURL('image/png', 0.9).split(',')[1];
      dataURL = canvas.toDataURL("image/png");
      dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

      $.ajax({
        url: 'https://api.imgur.com/3/image',
        type: 'post',
        headers: {
          Authorization: 'Client-ID 4aa326cbf96a513'
        },
        data: {
          image: dataURL
        },
        dataType: 'json',
        error: function(response) {
          console.log(response);
        },
        success: function(response) {
          if (response.success) {
            alert(response.data.link);
          }
        }
      });
    });
  });
});

0 个答案:

没有答案