Sample code for converting Canvas and Image to each other_html5 tutorial skills

Convert JS Canvas to Image
Original demo: JavaScript Canvas Image Conversion Demo
At last week’s Mozilla Web Development Conference, we spent most of the day discussing future Mozilla market applications. Instagram, the most popular mobile application in recent times, was sold to FaceBook for a whopping $1 billion.
I don’t mind making some extra money, so I decided to create an Instagram style app (will share it later)

This article shows you how to convert Image to canvas, and how canvas extracts an Image .

Convert Image to Canvas
To convert the image to Canvas (artboard, canvas), you can use the drawImage method of canvas element context:

Copy code

The code is as follows:

// Convert image to canvas object
function convertImageToCanvas(image) {
//Create canvas DOM element and set its width and height to be the same as the image
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image .height;
// Coordinate (0,0) means starting from here, which is equivalent to offset.
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}

Convert Canvas to Image
Assume the image has been After processing on the canvas, you can use the following method to convert the canvas into an Image object.

Copy code

The code is as follows:

// Extract image image from canvas
function convertCanvasToImage(canvas) {
//New Image object, which can be understood as DOM
var image = new Image();
// canvas.toDataURL returns a string of Base64 encoded URLs, of course , the browser itself must support
//Specify the format PNG
image.src = canvas.toDataURL("image/png");
return image;
}

Well! Converting images to canvas is easier than you think. I will demonstrate different image processing techniques to you in the future. I believe that you will definitely be able to make a lot of money using these techniques in the future.