DEV Community

loading...
Cover image for How to Convert Canvas to an Image using JavaScript

How to Convert Canvas to an Image using JavaScript

cooldashing24 profile image Vishnu Damwala Originally published at meshworld.in ・1 min read

The HTMLCanvasElement has special method toDataURL() which returns a encoded data URI representing the image in the specified format(defaults to PNG).

  • If the canvas height or width is 0 or larger than the canvas maximum size, then the string containing "data:" is returned.
  • If the requested type is not image/png, but the returned value starts with data:image/png, then the requested type is not supported.
  • Chrome also supports the WEBP(image/webp) type.

Syntax:

canvas.toDataURL(type, encoderOptions);

Parameters:

type (optional)
  • It indicates the type of image format.
  • It will have the value of string type and is an optional parameter with default format type value image/png.
encoderOptions (optional)
  • It indicates the type of image format.
  • It will have the value of number type and is an optional parameter with default value 0.92.
  • The value ranges from 0 to 1 indicating the quality of an image to use for formats that use lossy compression such as image/jpeg and image/webp.
  • Invalid value is ignored and default value is considered instead of it.

Return value

It returns a DOMString containing the requested data URI.

Example 1

<canvas id="canvas" width="640" height="360"></canvas>
var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
console.log(dataURL);
/*
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABa...5i/JyZmJr6v77XLtUjciSUnklJd29flKi1cAPKgw"
*/

For more examples visit : How to Convert Canvas to an Image using JavaScript

Hope you learn something new. If this article was helpful, share it.

Happy coding

Discussion (0)

pic
Editor guide