javascript - Cross-origin data in HTML5 canvas -
i'm loading image in js , draw canvas. after drawing, retrieve imagedata canvas:
var img = new image(); img.onload = function() { canvas.drawimage(img, 0, 0); originalimagedata = canvas.getimagedata(0,0,width, height)); //chrome fails } img.src = 'picture.jpeg';
this works both in safari , firefox, fails in chrome following message:
unable image data canvas because canvas has been tainted cross-origin data.
the javascript file , image located in same directory, don't understand behavior of chorme.
to enable cors (cross-origin resource sharing) images pass http header image response:
access-control-allow-origin: *
the origin determined domain , protocol (e.g. http , https not same) of webpage , not location of script.
if running locally using file:// seen cross domain issue; better go via
http://localhost/
Comments
Post a Comment