toDataURL method

Returns the content of the current canvas as an image that you can use as a source for another canvas or an HTML element (such as img).

The canvas element

Syntax

var retval = canvas.toDataURL(type, jpegquality);

Parameters

type [in, optional]

Type: string

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 [in, optional]

Type: number

The quality level of a JPEG image in the range of 0.0 to 1.0.

Return value

Type: string

The image data.

Standards information

Remarks

Typical values for the type parameter are image/png or image/jpeg. The type image/gif isn't supported.

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.

Result output of code example showing a graphic produced with canvas and the snapshot of it as a png image.

Try the example in your browser.


<!DOCTYPE html>
<html>
<head>
    <title>toDataURL example</title>

</head>
<body>
  <div>
     Copy graphic using toDataURL
  </div>
  <div>
    <canvas id="MyCanvas" width="400" height="400" onclick="putImage();" >This browser or document mode doesn't support canvas</canvas>
    <img id="MyPix" src=""/>
  </div>

  <script>
    // 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>
</body>
</html> 


See also

canvas

 

 

Show:
© 2014 Microsoft