HTML5 canvas操作图片

1.canvas操作图像的能力

canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。和往常一样，canvas操作图像需要两步基本操作：

• 获取图片源：获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片
• 绘制到画布上：使用drawImage()函数将图片绘制到画布上

2.获取图片源

绘制图像之前，我们要先获取图片源。在canvas绘制中，我们可以将以下图片作为
图片源：

图片源可以是

• HTMLImageElement：这些图片是由Image()函数构造出来的，或者任何的< img >元素
• HTMLVideoElement：用一个HTML的 < video >元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
• HTMLCanvasElement：可以使用另一个 < canvas > 元素作为你的图片源。
• ImageBitmap：这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。
  这些源统一由 CanvasImageSource类型来引用。

如何获取以上的图片源对象呢？

(1）使用相同页面内的图片

• document.images集合
• document.getElementsByTagName()方法
• 如果你知道你想使用的指定图片的ID，你可以用document.getElementById()获得这个图片

（2）使用其它域名下的图片

在 HTMLImageElement上使用crossOrigin属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染canvas，否则，使用这个图片将会污染canvas。

（3）使用其它 canvas 元素

和引用页面内的图片类似地，用 document.getElementsByTagName 或 document.getElementById 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。

一个常用的应用就是将第二个canvas作为另一个大的 canvas 的缩略图。

（4）用Imag（）构造HTMLImageElement

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

注意：在使用image对象的图片前，要判断其是否加载完毕：

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

（5）通过data：url嵌入图片

使用data:url方法的
优点是，图片内容即时可用，无须再到服务器端重新加载。可以将 CSS，JavaScript，HTML 和 图片全部封装在一起，迁移起来十分方便。
缺点是，图像没法缓存，图片大的话内嵌的 url 数据会相当的长：

img.src="Base64编码";

（6）使用视频帧

我们可以通过getElementById，或者getElementsByTagName来获取HTML标记中的视频< video >

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

3.将图片绘制到画布上

我们在获取了图片源之后，就能使用drawImage方法将图片渲染到canvas中了，drawImage方法有三种形态：

（1）drawImage(image,x,y)

image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

举例

下面用一个外部的Excel图像作为一线性图的背景。导入背景之后我们就能省下不少代码，同时在一些难以绘制的情况下，导入外部图片是一种很好的策略。这里只用到一个 image 对象，于是就在它的 onload 事件响应函数中触发绘制动作。

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可以操作图像，对其进行缩放，image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标，width和height是图片的宽高。

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

将图片按照200*150的大小绘制在canvas画布上，图片的起始位置是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)

切片方法包含了8个参数：

• sx：图像源的切片x向偏移量
• sy：图像源的切片x向偏移量
• sWidth：图像源的切片宽度
• sHeight：图像源的切片高度
• dx：目标显示位置x
• dy：目标显示位置y
• dWidth：目标显示宽度
• dHeight：目标显示高度
  

drawImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)示例：

我们先将图片直接插入HTML标记中，然后通过getElementById获取img元素节点，再用drawImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)切片将新的图片放在右下角

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);
		}
	}
}