canvas系类-加载/裁剪图片一

一.知识点：

二.操作

1.获取图片的方式

①创建一个新的 HTMLImageElement 对象。要实现这个方法，我们可以使用很方便的Image()构造函数。
var img = new Image();   // 创建一个<img>元素
    img.src = 'myImage.png'; // 设置图片源地址
使用这个方法的时候，要等加载完毕后才可以使用这个图片，所以要用
img.onload = function(){
  // 执行drawImage语句
}
②用 document.getElementsByTagName 
或 document.getElementById 方法来获取图片，
var img= document.getElementById("img");
ctx.drawImage(img,0,0,150,150,45,45,150,150);
③data：url加载
其优点就是图片内容即时可用，无须再到服务器兜一圈。（还有一个优点是，可以将 CSS，JavaScript，HTML 和 图片全部封装在一起，迁移起来十分方便。）缺点就是图像没法缓存，图片大的话内嵌的 url 数据会相当的长：
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA'

2.编辑代码

2.1获取canvas上下文，创建二维环境

var canvas=document.getElementById('canvas1');

var context=canvas.getContext('2d');

2图片处理

2.2图片载入

var img=new Image();
img.src="uploads/1.jpg";
img.οnlοad=function (){
context.drawImage(img,10,10);

}

2.3.设置图片大小
var img=new Image();
img.src="uploads/1.jpg";
img.οnlοad=function (){
context.drawImage(img,10,10,150,150);
}
 
4. 剪切图像，并在画布上定位被剪切的部分
var img=new Image();
img.src="uploads/1.jpg";
img.οnlοad=function (){
context.drawImage(img,10,10);
context.drawImage(img,50,50,50,50,320,100,150,100);
//(图片，开始剪切x(可选)，开始剪切y(可选),被剪切图形的宽(可选)，,被剪切图形的高(可选),放置图片的位置x,放置图片的位置y,图片的宽，图片的高)

}

5.指定的方向内重复指定的元素
var img=new Image();
img.src="uploads/2.jpg";
img.οnlοad=function (){
var ptn=context.createPattern(img,"repeat");
context.fillStyle=ptn;
context.fillRect(0,0,500,500);
}