Menu
I am trying to fetch the dataUrl from the canvas to use is as css background-image on various elements.
But i always get following error Uncaught TypeError: Object #<HTMLCanvasElement> has no method 'toDataUrl'
this is my test code
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
alert(c.toDataUrl());
</script>
</body>
</html>
is it once again the security feature in disguise?, or am i simply stupid...
Thanks in advance
485
toDataURL() method returns a data URL containing a representation of the image in the format specified by the type parameter. The desired file format and image quality may be specified. If the file format is not specified, or if the given format is not supported, then the data will be exported as image/png .
toDataURL is a synchronous operation that does not trigger any events. Being synchronous, it's a blocking operation so no alert is required to prevent the next command from executing before toDataURL is fully complete. The next command will execute when toDataURL is fully complete.
toDataURL( ) ; / / This method saves graphics in png document. getElementById('cimg'). src = imgurl; // This will set img src to dataurl(png) so that it can be saved as image. In this way, we can save canvas data to file in HTML5.
You have the function name incorrect. Watch the case:
alert(c.toDataURL());DEMO
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
