Solution! : GetImageData on & #39; CanvasRenderingContext2D & #39;: The canvas has been tainted by cross-origin data., crossorigin

Solution! : GetImageData on 'canvasrenderingcontext2d ': The canvas has been tainted by cross-origin data., crossorigin

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

I recently learned this book from html5 CSS3. I highly recommend this book by Li Gang

Failed to execute 'getimagedata' on 'canvasrenderingcontext2d ', because a chrome cross-origin access to json Failed once before, so I know that it is the problem of browser configuration -- allow-file-access-from-files. I found no answer on the Internet, so I thought why my company can, every time my company uses chrome, there will be a prompt indicating that the browser's security performance is low. I will know that the company will minimize the security performance, so there will be no json cross-domain and getImageData

Problem, so I opened the browser. That's the problem.

Solution 1: -- disable-web-securityWe can add this sentence to the target. Remember that there is a space in the middle, close the browser, and manually open the input address. (My local file html is directly dragged and dragged, do not use dw quick F12 to enable it. The first time it is invalid, I don't know why) solve the problem (see Figure 1 for details), and attach the cause of the problem:

1. first, there is no server environment (for example, local html webpages, operating local images ), the error "Unable to get image data from canvas because the canvas has been tainted by cross-origin data" is reported. Because the images used for local testing are in folders, js cross-domain restrictions cannot obtain data under different domain names, while the local location does not have a domain name, therefore, the browser regards you as a cross-origin, resulting in an error. 2. To prevent spoofing, the browser will track image data. When you place an image that is different from the canvas domain on the canvas, the canvas becomes "tainted" (contaminated), and the browser will not allow you to operate on any pixels of the canvas. To prevent multiple types of XSS/CSRF attacks (two typical cross-site attacks ).

Solution 2:

Convert the image into a string and save it in the browser. If you want to convert it back when using it, refer

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

Image: Appendix 1