toDataURL
Method of dom/HTMLCanvasElementdom/HTMLCanvasElement
Syntax
var object = object.toDataURL(/* see parameter list */);
Parameters
type
- Data-type
- any
The standard MIME type for the image format to return. If you do not specify this parameter, the default value is a PNG format image.
jpegquality
- Data-type
- any
The quality level of a JPEG image in the range of 0.0 to 1.0.
Return Value
Returns an object of type DOM NodeDOM Node
String
The image data.
Examples
The following code example draws some graphics on a canvas and then uses toDataURL to make an image that is assigned to an img object.
<!DOCTYPE html><html>
<head>
<script type="text/javascript">
function draw()
{
// Create some graphics.
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.fillStyle="white";
ctx.beginPath();
ctx.rect (5,5,300,250);
ctx.fill();
ctx.stroke();
ctx.arc(150,150,100,0,Math.PI, false);
ctx.stroke();
}
}
function putImage()
{
var canvas1 = document.getElementById("MyCanvas");
if (canvas1.getContext) {
var ctx = canvas1.getContext("2d"); // Get the context for the canvas.
var myImage = canvas1.toDataURL("image/png"); // Get the data as an image.
}
var imageElement = document.getElementById("MyPix"); // Get the img object.
imageElement.src = myImage; // Set the src to data from the canvas.
}
</script>
</head>
<body onload="draw()" bgcolor="lightgray" >
<div>
<button onclick="putImage()">Copy graphic using toDataURL</button>
</div>
<div>
<canvas id="MyCanvas" width="400" height="400" > </canvas>
<img id="MyPix">
</div>
</body>
</html>
Notes
Remarks
Typical values for the type parameter are image/png or image/jpg.
Syntax
Standards information
- HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.10
See also
Related pages
- canvascanvas
Attributions
Microsoft Developer Network: [Windows Internet Explorer API reference Article]