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
Post a Comment