How to use Canvas to implement the function of putting pictures and saving as pictures in HTML5
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!
