Security Error on reading canvas pixel data
You get the following error when trying to move the mouse cursor over any part of canvas.
Access to XMLHttpRequest at ‘file:///……png’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
Or
createjs_1.1_min.js:29 Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.
It happens because bowser restricts reading pixel data locally from any image as a part of it’s security restriction. For your information, canvas too is a type of image. And reading pixel data is a routine part of any canvas based API like Zimjs or Createjs. And therefore as soon as the browser detects pixel data being read, the script generates error on the line and the program halts. Solution:
The right solution is to upload the files on a web-server (local web-server eg. through xampp, wampp etc too will work). It is because when the javascript files are published on server and then loaded through browser on the local computer, then browser finds it completely safe, and allows reading pixel data. Hence once the files are published on the server, the error won’t be generated. And will load and run fine on any browser.