Name
Canvas.toDataURL() — returns canvas image as a data: URL
Synopsis
String toDataURL() String toDataURL(Stringtype
,parameters...
)
Arguments
type
A string specifying the MIME type of the image format to use. If this argument is omitted, the default value is “image/png”, and the PNG image format is the only one that implementations are required to support.
parameters...
For image types other than PNG, additional arguments may be specified that provide encoding details. If
type
is “image/jpeg”, for example, then the second argument should be a number between 0 and 1 specifying the image quality level. No other parameter arguments are standardized at the time of this writing.
Returns
A string, containing a PNG representation of the canvas bitmap,
encoded as a data:
URL
Description
toDataURL()
returns the contents of the canvas
bitmap in a URL form that can easily be used with an
<img>
tag or transmitted across the
network.
To prevent cross-origin information leaks,
toDataURL()
does not work on
<canvas>
tags that are not “origin-clean.” A
canvas is not origin-clean if it has ever had an image drawn in it
(directly by drawImage()
or indirectly through a
CanvasPattern) that has a different origin than the document that
contains the canvas.
Example
// Copy the content of a canvas to an image element // and append that image to the document var canvas = document.getElementById("my_canvas"); var image = document.createElement("img"); image.src = canvas.toDataURL(); document.body.appendChild(image); ...
Get Canvas Pocket Reference now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.