0

I used canvas html tag. And I loaded two images into canvas. And I could saw two images in canvas tag. But when i try to get new image' src by using canvas.toDataURL(), i can't get and i take this error(Tainted canvases may not be exported).

<!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>
Sezer K.
  • 9
  • 3
  • You cant get image data of images from external origins (ie domains) it is a security feature of the browser. You would need to pass the image through a proxy that enables CORS or through your own backend – Patrick Evans Aug 31 '19 at 12:16
  • @PatrickEvans How can i pass the image through a proxy that enables CORS? – Sezer K. Aug 31 '19 at 12:31
  • @SezerK. you can upload your images on imgur.com, it serves images with correct cors headers – Stranger in the Q Sep 02 '19 at 13:09
  • We took a decision that we will do this at back end side. Otherwise, we won't be able to do image processing at front end well. – Sezer K. Sep 03 '19 at 06:03

0 Answers0