在 HTML5 中，Image 对象对应着一幅图片，想要获取一个图像对象，有以下几种方法：
1) 通过 document.images 集合、document.getElementsByTagName 方法或者 document.getElementById 方法来获取网页内已经存在的图片对象；
2) 用 document.getElementsByTagName 或 document.getElementById 方法来获取另外一个 Canvas 对象，将这个 Canvas 对象作为一个图像对象；
3) 最常用的方法：创建一个新的空 Image 对象，给他一个图片的超链接，代码如下：
//创建一个空图像对象 var img = new Image(); //给图像对象一个图片超链接 img.src = 'myImage.png';
4) 最后一种是通过 data: url 方式嵌入图像，这种方法很奇妙，他可以用一个很长的字符串来表示一幅图像。
那么这个很长的字符串是怎么来的呢？他是把真正的图像文件（bmp jpg 等等）通过 Base64 编码而来，具体的编码程序网上能搜索到很多，我博客里就有一个 Python 版的。
用这种方式的好处就是，图片资源始终内嵌在 HTML 网页文件中，缺点是数据量太大，而且图片没办法缓存，导致网页文件打开速度变慢
下面的字符串就是一幅美女图片的 Base64 编码的一小段，让大家看看是什么样子的：
/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAXw
这些乱七八糟的东西就包含了美女图片的一小部分内容了，后面我们将把它绘制到 Canvas 上
二、绘制图像对象
我们得到一个图像对象后，它只是在内存中，我们怎么才能将它绘制到画布上呢？ 上下文对象有一个绘制图像对象的方法：
drawImage(image, x, y)
简单吧？image 就是你事先准备好的图像对象，x, y 就是图像左上角放置的位置 ，这个方法调用后，你的图像就会出现在 Canvas 上了
下面我们来把上面的美女图像绘制出来，代码如下：
代码
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><canvas id="canvas1" width="250" height="300" style="background-color:black">
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
<input type="button" value="显示美女" onclick="Show();" />
<input type="button" value="清空" onclick="Clear();" />
<script type="text/javascript">
//美女图的 Base64 编码
IMG_SRC='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAA......'//省略40字节
//缩小版本的美女图
IMG_SRC_SMALL='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAA......'//省略40字节
function Show(){
//获取画布对象
ctx = document.getElementById("canvas1").getContext("2d");
//创建图像对象
img=new Image();
//图像被装入后触发
img.onload=function(){
ctx.drawImage(img,0,0);
}
//指定图像源
img.src=IMG_SRC;
}
function Clear(){
//清除画布
ctx = document.getElementById("canvas1").getContext("2d");
ctx.clearRect(0,0,250,300);
}
</script>注意：把绘制方法放到图像对象的 onload 事件中，是为了确保图像在完全装入后才绘制
三、缩放图像
同样的 imageDraw 方法，增加两个参数，就可以对图像实现缩放，如下：
drawImage(image, x, y, width, height)
width 代表你想将图像绘制成多宽，height 代表你想将图像绘制成多高，设定好后系统会自动按比例进行缩放。
下面的例子我们来模仿一个常见的图像软件的小功能，通过拖动滑动条对图像进行缩放，代码如下：
代码
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><canvas id="canvas2" width="250" height="300" style="background-color:black">
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
注意：下面的 Range 控件只能在 Google Chrome 浏览器中正确呈现
横向缩放<input type="range" min="1" max="20" onchange="Scale1(event)"/><br/>
纵向缩放<input type="range" min="1" max="20" onchange="Scale2(event)"/><br/>
按比例缩放<input type="range" min="1" max="20" onchange="Scale3(event)"/><br/>
平铺<input type="range" min="1" max="10" value="1" onchange="Scale4(event)"/><br/>
<script type="text/javascript">
function Scale1(){
//计算比例
var scale=event.target.value/10
///获取画布对象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//创建图像对象
img=new Image();
//图像被装入后触发
img.onload=function(){
//横向缩放绘制
ctx.drawImage(img,0,0,img.width*scale,img.height);
}
//指定图像源
img.src=IMG_SRC;
}
function Scale2(){
//计算比例
var scale=event.target.value/10
///获取画布对象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//创建图像对象
img=new Image();
//图像被装入后触发
img.onload=function(){
//纵向缩放绘制
ctx.drawImage(img,0,0,img.width,img.height*scale);
}
//指定图像源
img.src=IMG_SRC;
}
function Scale3(){
//计算比例
var scale=event.target.value/10
///获取画布对象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//创建图像对象
img=new Image();
//图像被装入后触发
img.onload=function(){
//按比例缩放绘制
ctx.drawImage(img,0,0,img.width*scale,img.height*scale);
}
//指定图像源
img.src=IMG_SRC;
}
function Scale4(){
//平铺比例
var scale=event.target.value;
///获取画布对象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//创建图像对象
img=new Image();
//图像被装入后触发
img.onload=function(){
//平铺个数
var n1=img.width/scale;
var n2=img.height/scale;
for(var i=0;i<n1;i++)
for(var j=0;j<n2;j++)
ctx.drawImage(img,i*img.width/scale,j*img.height/scale,img.width/scale,img.height/scale);
}
//指定图像源
img.src=IMG_SRC;
}
</script>横向缩放
纵向缩放
按比例缩放
平铺
提示：
只有在 Google Chrome 浏览器中，Range 控件才能呈现出滑动条的的样子并正确工作；
在其他浏览器中，您可能只能看到四个文本框，并且无法正常工作
四、裁剪图像
图像裁剪同样是使用 imageDraw 方法，原型如下：
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，其中
sx, sy 是图像上的一个坐标位置，这个坐标是裁剪的起始点
sWidth, sHeight 是裁剪的宽度和长度
有了这四个参数，我们就可以将图像上的任意区域裁剪出来了
另外
dx, dy 是