CORS on Image Not Working

Question

I have a server serves images, and I need to be able to manipulate the image in HTML5 canvas. I added CORS headers to the image server, and reference the image in the HTML using tags. However, the image server won't return CORS headers when the client fetches the image in the tag, unless I hit Ctrl-F5 on the browser. I added crossorigin=anonymous to the tag, but still not working. What am I doing wrong?

Answer 1

Yes I feel your pain coz I have gone through the same problem. Can you see Mozilla Developer Center

and follow the instruction because i solve the problem using the method described here. Especially using following code

// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}