All geek questions in one place

Uncaught SecurityError: Failed to execute 'getImageData' in 'CanvasRenderingContext2D': the canvas was corrupted by cross-origin data

I get this error in Chrome and Opera browsers:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

This code works great in Internet Explorer, Mozilla Firefox, and Safari. But I need to fix this in Chrome and Opera. Help me find a solution to the problem?

I get this error on this line

 imgData = ctx.getImageData(x1,y1,w,h);
+5
source share
2 answers

Perhaps this will help, since you mentioned cross origin, try this,

  var UimageObj = new Image();

crossOrigin must be set to enable canvas data storage. The source image must have access-control-allow-origin set to * or the selected domain

 UimageObj.crossOrigin = 'anonymous'; // crossOrigin attribute has to be set before setting src.If reversed, it wont work. UimageObj.src = obj_data.srcUser;

Hope this helps.

+11
source

When you download your html file from disk using: file://path/to/your/file.html , Google Chrome and Opera will cause an error in the line, including: imgData = ctx.getImageData(x1,y1,w,h);

The solution is simple: starting the web server (apache, nginx) puts your html file somewhere on the web server and loads your html file from: http://localhost/somewhere/file.html

+1
source

Source: https://habr.com/ru/post/1206004/

More articles:


All Articles