CODEWITHSUNDEEP
fabricjs
salem
salem

Reputation: 11

downloading doesn't work when adding image with fabric.js

I use fabric.js to draw on an image. When I add the block of code for adding an image to the canvas, the image appears, but the downloading stops working. When I remove this block, the downloading works.

this is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fabric.js Drawing App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
  </head>
  <body>
    <script>

      // Create canvas element
      const canvasElement = document.createElement('canvas');
      canvasElement.width = 500;
      canvasElement.height = 500;
      canvasElement.id = 'canvas';
      document.body.appendChild(canvasElement);

      // Create save button
      const saveBtn = document.createElement('button');
      saveBtn.textContent = 'Save Image';
      saveBtn.id = 'saveBtn';
      document.body.appendChild(saveBtn);

      const canvas = new fabric.Canvas('canvas', {
        isDrawingMode: true // Enable drawing mode
      });

      canvas.on('mouse:move', function(event) {
        if (event.e.clientX && event.e.clientY) {
          const x = event.e.clientX - canvasRect.left;
          const y = event.e.clientY - canvasRect.top;

          circle.set({
            left: x,
            top: y,
            radius: 5,
            visible: true
          });
          canvas.renderAll();
        }
      });

      fabric.Image.fromURL( 'https://lh3.googleusercontent.com/I1zd_ENZEN0VT23yy0liopnY1aUSDrIAPFH3cW_Ef7XvGt9e5FqhiAEM8Mvd4Zj2PEbK9FNOVWKKgBmCRhRPyCE=s1280-w1280-h800', function(img) {
        img.set({
          left: 100,
          top: 100,
          scaleX: 0.5,
          scaleY: 0.5
        });
        canvas.add(img);
      });

      saveBtn.addEventListener('click', function() {
        const dataURL = canvas.toDataURL({
          format: 'png'
        });
        const link = document.createElement('a');
        link.href = dataURL;
        link.download = 'drawing.png';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    </script>
  </body>
</html>

I tested the code in the w3school online ide in chrome and edge and brave

Upvotes: 0

Views: 78

Answers (1)

DocAmz
DocAmz

Reputation: 106

What happen here ?

'As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes tainted. A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.'

Read this : Allowing cross-origin use of images and canvas

How to solve your problem ?

  fabric.Image.fromURL('https://yourExternalDomain.com/image/', function(img) {
    img.set({
      left: 100,
      top: 100,
      scaleX: 0.5,
      scaleY: 0.5,
    });
    canvas.add(img);
  }, { crossOrigin: 'Anonymous' }); // Enable cross-origin image

Upvotes: 0

Related Questions