HTML5 canvas picture operation

Ability 1.canvas operation of the image

canvas one more interesting feature is the ability to image manipulation. It may be used as a moving image or a synthesized background pattern, and the game interface (Sprites) and the like. The browser supports external images in any format can be used, such as PNG, GIF or JPEG. You can even be on the same page in the other canvas element-generated image as a picture source. As usual, canvas image operation requires two basic operations:

• Get Picture source : obtain a pointer to the object HTMLImageElement or other canvas element as a source of reference, can also be a way to use the picture by providing a URL
• Drawing on canvas : Use drawImage () function to draw a picture on the canvas

2. Get the picture source

Before drawing the image, we must first get the picture source. In the drawing canvas, we can use the following picture as a
picture source:

Pictures can be a source

• The HTMLImageElement : These images by Image () function is constructed, or any of the <img> element
• HTMLVideoElement : as your picture source, you can grab the current frame as a video image from a <video> element of an HTML
• HTMLCanvasElement : You can use another <canvas> element as the source of your picture.
• ImageBitmap : This bitmap is a high performance, low latency can be drawn, which may be generated from all of the above sources and several other sources.
  These sources referenced by the unified CanvasImageSource type.

How to get more picture source objects?

(1) within the same page with images

• document.images collection
• document.getElementsByTagName()方法
• If you know you want to use the specified picture ID, you can use document.getElementById () to obtain this image

(2) the use of images in other domain name

Use crossOrigin property on HTMLImageElement, you can request load pictures on other domain. If the image server to allow cross-domain access this image, then you can use this image without contaminating the canvas, otherwise, the use of this image will contaminate the canvas.

(3) use of other canvas elements

And reference images within a page Similarly, with document.getElementsByTagName document.getElementById method or access other canvas elements. But you should be introduced already prepared canvas.

A common application is the second canvas as a thumbnail of another big canvas.

(4) Imag () is configured HTMLImageElement

var img = new Image();   // 创建一个<img>元素
img.src = '路径名'; // 设置图片源地址

Note: Before using image objects picture, to determine whether it is loaded:

var img=new Image();
img.src="路径";
img.onload=function()
{
	//func_drawImage
}

(5) via data: url embedded image

Use the data: url method the
advantage is that the image is available immediately, and then to the server without having to reload. We can CSS, JavaScript, HTML and pictures all packaged together, making it more portable.
The downside is that the image is not cached, the big picture of encoded url can become quite long:

img.src="Base64编码";

(6) using a video frame

We can get the video HTML tag <video> by getElementById, getElementsByTagName or

var myvideo=document.getElementById('myvideo');

3. Draw a picture on the canvas

After we get the picture source, you can use drawImage method to render images to the canvas in, drawImage approach has three forms:

（1）drawImage(image,x,y)

canvas or image is the object image, x and y are the coordinates of its initial target in the canvas.

For example

Excel below with an external image as a background of the linear FIG. After importing the background we can save a lot of code, but in some cases it is difficult to draw, import external image is a good strategy. Here only use a image objects, so they function trigger rendering its actions in response to the onload event.

function draw() 
{
	var canvas=document.getElementById("canvas");
	if(canvas.getContext)
	{
		var ctx=canvas.getContext('2d');	
		var img=new Image();
		img.src="form.png";
		img.onload=function()
		{
			ctx.drawImage(img,0,0);
			ctx.beginPath();
			ctx.moveTo(90,400);
			ctx.lineTo(250,300);
			ctx.lineTo(550,200);
			ctx.lineTo(750,500);
			ctx.strokeStyle="blue";
			ctx.stroke();
		}
	}
}

（2）缩放drawImage(img,x,y,width,height)

drawImage can operate image, scale it, canvas or image is the object image, x and y are the coordinates of its start in the canvas in the target, width, and height are the width and height of the image.

drawImage(img,x,y,width,height)示例：

The image according to the size of 200 * 150 drawn on the canvas in the canvas, a picture start position is 200i + 150j

function draw() 
{
	var canvas=document.getElementById("canvas");
	if(canvas.getContext)
	{
		var ctx=canvas.getContext('2d');	
		var img=new Image();
		img.src="spiderMan.jpg";
		img.onload=function()
		{
			for(var i=0;i<5;i++)
			{
				for(var j=0;j<5;j++)
				{
					ctx.drawImage(img,200*i,150*j,200,150);
				}
			}
		}
	}
}

(3) 切片 drawImage (img, sx, SY, sWidth, sHeight, dx, dy, dWidth, dHeight)

Slicing contains eight parameters:

• sx: x slice image source to the offset
• sy: x slice image source to the offset
• sWidth: an image source slice width
• sHeight: slicing height of the image source
• dx: target display position x
• dy: object display position y
• dWidth: a target display width
• dHeight: target display height
  

drawImage (img, sx, SY, sWidth, sHeight, dx, dy, dWidth, dHeight) 示例:

We first images directly into HTML tags, and then get img element node by getElementById, then drawImage (img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) slice of the new picture on the bottom right corner

function draw() 
{
	var canvas=document.getElementById("canvas");
	if(canvas.getContext)
	{
		var ctx=canvas.getContext('2d');	
		var img=new Image();
		img.src="spiderMan.jpg";
		img.onload=function()
		{
			var img=document.getElementById('img');//获取img对象
			ctx.drawImage(img,420,40,200,270,400,0,150,200);
		}
	}
}