Windows Dev Center

EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

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>
    <style>
      canvas {
        border:solid black 1px;
      }

      img {
        width:400px;
        height:400px;
        border:solid black 1px;
      }
    </style>
</head>
<body>
  <h1>Copy graphic using toDataURL</h1>
     
  <div>
    <button id="copy">Copy canvas image to image element</button> <br />
    <canvas id="MyCanvas" width="400" height="400"  >This browser or document mode doesn't support canvas</canvas>
    <img id="MyPix" src="" width="400" height="400" />
    
  </div>

  <script>
    // Create some graphics on the canvas.    
    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();
   }

    // catch the click from the button and copy the graphic
    document.getElementById("copy").addEventListener("click", function () {
      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.
    }, false);

  </script>
</body>
</html> 


See also

canvas

 

 

Afficher:
© 2015 Microsoft