Comment: This article mainly introduces the method of putting pictures and saving them as pictures in HTML5 Canvas. Especially saving the picture content as pictures, which is a very practical function. Friends who need it can refer to it.
Copy images into canvas using JavaScript
To put the image into the canvas, we use the drawImage method of the canvas element:
// 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);</p><p> return canvas;
}
Here the coordinate points on the 0, 0 parameter canvas, the image will be copied to this place.
Save canvas into picture format using JavaScript
If your work on the canvas has been completed, you can convert the canvas data into image format using the following simple method:
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
This code can magically convert canvas into PNG format!
These techniques for converting between pictures and canvas may be much simpler than you think.