How to save canvas in HTML5? HTML5 save canvas method

The content of this article is about how to save the canvas in HTML5? The HTML5 canvas saving method has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I finally drew a cool graphic on the canvas, so I should save it. But unfortunately, these graphics in the canvas themselves are not real pictures and cannot be saved directly. Fortunately, the Canvas API provides the toDataURL() method, which can convert graphics in the canvas into pictures.

By default, the toDataURL() method converts the graphic into a png in base64 encoding format, and then returns the Data URL data. You can pass in MIME type parameters to toDataURL() to convert the canvas into images in other formats.

After you have the Data URL data, you can fill the data directly into the a1f02c36ba31691bcfe87b2722de723b element, or download them directly from the browser. Here is an example to illustrate how to use the toDataURL() method to save the entire canvas as a picture.

HTML code is as follows:

<button onclick=toDataURL("image/png")>显示为png图片</button>
<button onclick=toDataURL("image/jpeg")>显示为jpg图片</button>
<canvas id="canvas" width="200" height="200"></canvas>
<img id="image"/>

Javascript code is as follows:

function toDataURL(mime) {
   var canvas = document.getElementById("canvas");
   var image = document.getElementById("image");
   image.src = canvas.toDataURL(mime);
}

In the above code, when the user clicks the button "Display as png image" or "Display as jpg image" , the toDataURL() method will be called to generate images from the content in the canvas and fill them into the img tag for users to download.

1. The toDataURL() method is a method of the canvas element itself, not a method of the canvas context object.

2. The default format for saving images in the toDataURL() method is "image/png", and the browser does not support other formats very well. For example, Google Chrome browser version 41.0.2272.118 also supports the "image/jpeg" format, but does not support the "image/gif" format.

2. Modern browsers already support right-clicking on Canvas and saving the canvas as an image, but it will be saved in the default "image/png" format. Of course, you can programmatically call the toDataURL() method, pass in MIME type parameters, and save it in other formats.

The above is how to save the canvas in HTML5? A complete introduction to the HTML5 canvas saving method. If you want to know more about Html5 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to save canvas in HTML5? HTML5 save canvas method. For more information, please follow other related articles on the PHP Chinese website!