Shulou(Shulou.com)06/03 Report--

This article is about how HTML5 uses Canvas to put pictures and save as pictures. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Use JavaScript to copy pictures into the canvas

To put the picture on the canvas, we use the drawImage method of the canvas element:

The code is as follows:

/ / Converts image to canvas; returns new canvas element

Function convertImageToCanvas (image) {

Var canvas = document.createElement ("canvas")

Canvas.width = image.width

Canvas.height = image.height

Canvas.getContext ("2d") .drawImage (image, 0,0)

Return canvas

}

The coordinate points on the canvas of the 0,0 parameters here, the picture will be copied to this place.

Save the canvas to picture format with JavaScript

If the work on your canvas has been completed, you can convert the canvas data into picture format using the following simple methods:

The code is as follows:

/ / Converts canvas to an image

Function convertCanvasToImage (canvas) {

Var image = new Image ()

Image.src = canvas.toDataURL ("image/png")

Return image

}

This code can magically transform canvas into PNG format!

These techniques for switching between pictures and canvases may be much easier than you think.

Thank you for reading! On "HTML5 how to use Canvas to put pictures and save as pictures" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.