html5 - Pass an image to a canvas with dataurl -


i trying make image being passed canvas weburl. code has been taken [question][1] accepted reason not work on me on firefox or chrome.

any ideas?

edit: here are:

var mycanvas = document.getelementbyid('my_canvas_id'); var ctx = mycanvas.getcontext('2d'); var img = new image; img.onload = function(){   ctx.drawimage(img,0,0); // or @ whatever offset };    img.src = 'data:image/png;base64,ivborw0kggoaaaansuheugaaaswaaacwcayaaabkw7xsaaaaxuleqvr4no3bmqeaaadcopvpbqhfoaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaoa1v9qaatx68/0aaaaasuvork5cyii='; 

the reason nothing shows provided data-uri contains no data, is, 300x150 transparent:

data:image/png;base64,ivborw0kggoaaaansuheugaaaswaaacwcayaaabkw7xsaaaaxuleqvr4no3bmqeaaadcopvpbqhfoaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaoa1v9qaatx68/0aaaaasuvork5cyii=

my guess along way saved empty canvas data-uri using todataurl() , using loading image.

try url instead , see works (red image of 300x150):

data:image/png;base64,ivborw0kggoaaaansuheugaaaswaaacwcayaaabkw7xsaaacbuleqvr4no3uoq0aiadewn9/avgbr5qcof/vne0afox3amarwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cajaswoutzprjavaaaaabjru5erkjggg==

var mycanvas = document.getelementbyid('my_canvas_id');  var ctx = mycanvas.getcontext('2d');  var img = new image;  img.onload = function(){    ctx.drawimage(img,0,0); // or @ whatever offset  };    img.src = "data:image/png;base64,ivborw0kggoaaaansuheugaaaswaaacwcayaaabkw7xsaaacbuleqvr4no3uoq0aiadewn9/avgbr5qcof/vne0afox3amarwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cadmmcmgwlydasimowgazdajimc8gwlcddsiamwwiydavimcwgw7cajaswoutzprjavaaaaabjru5erkjggg==";
<canvas id="my_canvas_id"></canvas>

var ctx=c.getcontext("2d");  ctx.fillstyle="red";  ctx.fillrect(0,0,300,150);  document.write(c.todataurl());
<canvas id="c"></canvas>


Comments

Popular posts from this blog

How to connect android app to App engine -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

php - display validation error message next to the textbox in codeigniter -