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

朴灿烈づ我的快乐病毒、 2021-09-11 08:04 280阅读 0赞

一.知识点：

![20170227102100237][]

二.操作

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

![20170227102708067][]

2.3.设置图片大小  
var img=new Image();  
img.src="uploads/1.jpg";  
img.οnlοad=function ()\{  
context.drawImage(img,10,10,150,150);  
\}  
 ![20170227102721144][]  
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,图片的宽，图片的高)

![20170227102824833][]

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

![20170227102742067][]

[20170227102100237]: /images/20210813/1b95b75ca06c464fa1ddd8002c8e6f47.png
[20170227102708067]: /images/20210813/0701bbce34434153b6dd7c8e6bdbb2fa.png
[20170227102721144]: /images/20210813/35b994955d31444a949c8a32caa124b8.png
[20170227102824833]: /images/20210813/68a0a2bb6c6b453fb1e729be6514ad1c.png
[20170227102742067]: /images/20210813/e5e1221142be414da90d9ca95f26d685.png