Html5 Canvas Preliminary Study Notes (11) - Simple Image Operation-H5 Tutorial-php.cn

Html5 Canvas Preliminary Study Notes (11) - Simple Image Operation

黄舟

Release： 2017-02-28 15:59:32

Original

1794 people have browsed it

This article introduces simple picture operations. The first is simple picture display.

The effect is as follows:

##It is to display a simple

jpg format picture on the web page. It is also very simple to implement. The code is as follows:

var image = new Image();
image.src = "icon.jpg";
image.onload = function(){
 context.drawImage(image,50,50);
}

Copy after login

First create a

Image object, and then set the image object’s src property to the relative path of the image, and finally , override the onload method to display it once the image is loaded.

The following introduces how to export the graphics we drew into pictures. The effect is as follows:

# #In fact, there is nothing special about the effect. Let’s mainly look at the code. The code is as follows:

context.beginPath();
context.moveTo(50,200);
//context.lineTo(50,250);
context.bezierCurveTo(100,100,150,300,200,200);
context.closePath();
context.stroke();
var dataURL = canvas.toDataURL();
//document.write(dataURL);
var output = new Image();
output.src = dataURL;
output.onload = function(){
context.drawImage(output,20,150);
}

Copy after login

After

stroke

, we pass canvas The ##toDataURL function exports what we drew before as a data url, and the format is as follows:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+8AAAKlCAYAAAC6zt2bAAAgAElEQVR4Xu3dfcj2d1kG8.....

Copy after login

There are many more behind. In short, we turned them into a picture, which we can export and display through these few sentences.

var output = new Image();
output.src = dataURL;
output.onload = function(){
   context.drawImage(output,20,150);
}

Copy after login

The above is the content of Html5 Canvas preliminary study notes (11) - simple image operations. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!