javascript - Canvas - Cannot create image url -
i set fiddle 2 images. don't understand why image a) not suitable, me source looks similar source of image b).
html
a)<img src="http://img.ui-portal.de/uim/coop/monster-beratung_140x115.jpg" /> b)<img src="http://i0.gmx.net/images/258/18821258,pd=2,h=250,mxh=600,mxw=800,w=480.jpg" /> <h4> display images above dataurl source: </h4> <div id="converted" ></div>
js
//create canvas-image a) var imga = new image(); imga.crossorigin = "anonymous"; imga.src = "http://img.ui-portal.de/uim/coop/monster-beratung_140x115.jpg"; imga.onload = function(){ var canvasa = document.createelement('canvas'); canvasa.width = imga.width; canvasa.height = imga.height; var ctxa = canvasa.getcontext('2d'); ctxa.drawimage(imga, 0, 0); var imgurl = canvasa.todataurl(); console.log("die url: "+ imgurl) $("#converted").append("<img src="+imgurl +" />"); } //create canvas-image b) var imgb = new image(); imgb.crossorigin = "anonymous"; imgb.src = "http://i0.gmx.net/images/258/18821258,pd=2,h=250,mxh=600,mxw=800,w=480.jpg"; imgb.onload = function(){ var canvasb = document.createelement('canvas'); canvasb.width = imgb.width; canvasb.height = imgb.height; var ctxb = canvasb.getcontext('2d'); ctxb.drawimage(imgb, 0, 0); var imgurl = canvasb.todataurl(); console.log("die url: "+ imgurl) $("#converted").append("<img src="+imgurl +" />"); }
the first image protected owner.
see debuger message
image origin 'http://img.ui-portal.de' has been blocked loading cross-origin resource sharing policy: no 'access-control-allow-origin' header present on requested resource. origin 'http://fiddle.jshell.net' therefore not allowed access.
Comments
Post a Comment