Canvas image storage, canvas Image

Canvas image storage, canvas Image

You can use the Canvas API to save the drawn image!

Canvas API uses the toDataURL method to output the painting status to a data URL and reload it. Then we can save the reloaded file directly.


The principle of the Canvas API for saving files is to dynamically output the state of our painting to the data pointed to by a data URL address.

What is data URL?
Data URL is actually a base64 encoded URL. It is mainly used for small sizes and can be embedded directly in webpages without embedding data from outside, such as images in img elements.

The format of data URL is "data: image/jpeg; base64,/9j /...."

How to Use toDataURL
Canvas. ToDataURL (type );
This method uses a parameter type to indicate the MIME type of the output data.
What is the MIME type:
Jpg image/jpeg

 

<! DOCTYPE html> 
 
function draw(id){    var canvas = document.getElementById(id);    var context = canvas.getContext('2d');    context.fillStyle = "green";    context.fillRect(0,0,400,300);    window.location = canvas.toDataURL('images/jpeg');}