0

I've just replaced the .png file with my .svg file on this demo: https://konvajs.org/docs/filters/RGBA.html But filtering doesn't work, it says: konva.min.js.download:12 Konva error: Unable to apply filter. Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Konva.Image.fromURL('./graphic-01.svg', function (lion) {
    var stage = new Konva.Stage({
      container: 'container',
      width: window.innerWidth,
      height: window.innerHeight,
    });
Railson Sousa
  • 1
  • You did not post enough code to confirm the issue, but it will be about a cross-origin issue. Anything to do with image manipulation in browsers is by default very wary of allowing script from one website source to get images that have a source on another website url. Read up on cross-origin policy. – Vanquished Wombat Sep 02 '21 at 10:21
  • Please provide enough code so others can better understand or reproduce the problem. – Community Sep 06 '21 at 14:46

1 Answers1

0

You can CORS issue. It may not be possible to cache and filter images when HTML is opened as a local file from file: protocol.

For me information, please read Tainted Canvas Docs.

lavrton
  • 18,973
  • 4
  • 30
  • 63
  • So I've changed the image url there with "https://paintbuilder-assets.s3.amazonaws.com/overlays/graphic-01.svg", and still same. Seems like it happens only for svg – Railson Sousa Sep 02 '21 at 16:00
  • @RailsonSousa that images has no CORS headers. You need to configure AWS to allow CORS requests. – lavrton Sep 03 '21 at 20:32