Workaround! : Getimagedata on ' canvasrenderingcontext2d ': The canvas had been tainted by cross-origin data.

Uncaught securityerror:failed to execute ' getimagedata ' on ' canvasrenderingcontext2d ': The canvas had been tainted by CRO Ss-origin data.

Recently in self-study HTML5 CSS3 very recommended Li Gang of this book

Failed to execute ' getimagedata ' on ' canvasrenderingcontext2d ' because there was a problem with chrome cross-domain access JSON, so I know it's a browser configuration problem Allow-file-access-from-files on it, found that there is no answer on the internet, so I think why my company can, I every time the company with Chrome will appear a hint that the browser security can be low, I know, because the company to minimize the security performance, So there's no JSON cross-domain and getimagedata issues, so I open the browser, and that's the problem.

Solution 1:--disable-web-security, we add this sentence to the target. Remember that there is a space in the middle, then close the browser, re-open the input address manually (I am the local file HTML directly drag and drop into the Do not use DW shortcut F12 Open, the first invalid, I do not know why) problem resolution (refer to the picture attached 1), accompanied by the cause of the problem:

1. First, there is no server environment (such as: local HTML page, operation of local images),it will be reported "unable to get image data from canvas because the canvas had been tainted by Cross-origin data" error. because the local test picture is within the folder, JS cross-domain limit is not able to get the data under the same domain name,and the local location is no domain name, so the browser think you are cross-domain, resulting in an error. 2. to prevent spoofing, the browser tracks image data. when a picture of a canvas is placed on a canvas, the canvas becomes "tainted" (contaminated), The browser will not let you manipulate any of the canvas's pixels. is to prevent multiple types of XSS/CSRF attacks (two typical cross-site attacks).

Workaround 2:

Convert the picture into a string to save in the browser, use and then convert back to be interested in reference

http://blog.csdn.net/molaifeng/article/details/42293509

Photo: attached 1

Workaround! : Getimagedata on ' canvasrenderingcontext2d ': The canvas had been tainted by cross-origin data.