0

我使用了 canvas html 标签。我将两个图像加载到画布中。我可以在画布标签中看到两个图像。但是，当我尝试使用 canvas.toDataURL() 获取新图像的 src 时，我无法获取并且出现此错误（可能无法导出受污染的画布）。

<!DOCTYPE html>
<html>
<body>

  <canvas id='canvas' style='border: 1px solid; width: 600px; height: 600px;'>
    Sorry, your browser does not support the canvas tag.
  </canvas>
<script>

    /**
        Canvas configurations
    **/
    var canvas = document.getElementById('canvas');
    canvas.width  = canvas.scrollWidth;
    canvas.height = canvas.scrollHeight;
    var ctx = canvas.getContext('2d');

    /**
        Image source declerations
    **/
    const src1 = 'https://cdn.pixabay.com/photo/2016/08/20/05/38/avatar-1606916_960_720.png';
    const src2 = 'https://www.w3schools.com/w3images/avatar2.png';

    function drawImage(sourceurl, i) {
      var img = new Image();
      img.crossorigin = 'Anonymous';
      img.src = sourceurl;
      img.addEventListener("load", function () {
        ctx.drawImage(img, 0, i * 170, 300, 160);
        console.log('canvas Data URL:', canvas.toDataURL());
      });
    }
    drawImage(src1, 0);
    drawImage(src2, 1);

  </script>


</body>
</html>
4

0 回答 0