javascript - Wrong base64 from canvas -
try couple of days solve 1 problem, can not understand why impossible. in canvas pictures drawn derivation gives wrong base64. did not understand why. started, , didn't have great experience javascript. help newbie can.
html:
<canvas id="canvas" width="400" height="300"></canvas> <textarea id="base64" rows="10" cols="80"></textarea> <img id="image">
javascript
function loadimages(sources, callback) { var images = {}; var loadedimages = 0; var numimages = 0; for(var src in sources) { numimages++; } for(var src in sources) { images[src] = new image(); images[src].onload = function() { if(++loadedimages >= numimages) { callback(images); } }; images[src].src = sources[src];}} var canvas = document.getelementbyid('canvas'); var context = canvas.getcontext('2d'); var sources = { a: 'http://www.prairiedogmag.com/wp-content/uploads/2012/08/cute-animals-office-bat-4-200x300.jpg', b: 'http://worldnewspress.net/wp-content/uploads/2014/03/happiest-animals-all-time-18-200x300.jpg' }; loadimages(sources, function(images) { context.fillstyle = "red"; context.fillrect(0, 0, 400, 300); context.drawimage(images.a, 0, 0, 200, 300); context.drawimage(images.b, 201, 0, 200, 300); }); var url = document.getelementbyid('base64').value =document.getelementbyid('canvas').todataurl(); document.getelementbyid('image').src = url;
to execute context.todataurl method images drawn on canvas must originate same domain web page code.
if not, fail cross-domain security , browser reject .todataurl.
it looks pulling cross-domain images , hence failing security concern.
check out cors security:
http://en.wikipedia.org/wiki/cross-origin_resource_sharing
here's illustration working code , demo: http://jsfiddle.net/m1erickson/76xf3/
this illustration fetches images server that's configured deliver images in cross-domain compliant way. there multiple configuration adjustments must done on server. notice code: crossorigin="anonymous". that's code on client side allows cross-origin images (the server must configured first).
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getelementbyid("canvas"); var context=canvas.getcontext("2d"); var imageurls=[]; // set paths images here var imagesok=0; var imgs=[]; imageurls.push("https://dl.dropboxusercontent.com/u/139992952/multple/character1.png"); imageurls.push("https://dl.dropboxusercontent.com/u/139992952/multple/character3.png"); loadallimages(start); function loadallimages(callback){ (var i=0; i<imageurls.length; i++) { var img = new image(); img.crossorigin="anonymous"; imgs.push(img); img.onload = function(){ imagesok++; if (imagesok>=imageurls.length ) { callback(); } }; img.onerror=function(){alert("image load failed");} img.src = imageurls[i]; } } function start(){ // imgs[] array holds loaded images // imgs[] in same order imageurls[] context.fillstyle = "red"; context.fillrect(0,0,120,110); context.drawimage(imgs[0], 0, 0, 60, 110); context.drawimage(imgs[1], 60, 0, 60, 110); var url = document.getelementbyid('base64').value =canvas.todataurl(); document.getelementbyid('image').src = canvas.todataurl(); } }); // end $(function(){}); </script> </head> <body> <h4>the canvas</h4> <canvas id="canvas" width=120 height=110></canvas> <h4>the image created canvas .todataurl</h4> <img id="image"> <h4>the base64 encoded image data</h4> <textarea id="base64" rows="10" cols="80"></textarea> </body> </html> javascript canvas html5-canvas base64 html2canvas
No comments:
Post a Comment