1 //从一个画布上下文中剪切一块dataUrl
 2     function cutRect(x,y,wid,hig,wid2,hig2)
 3     {
 4         //将矩形转换为路径，然后用更一般化的路径方法处理区域
 5         var path=[{x:x,y:y},{x:x+wid,y:y},{x:x+wid,y:y+hig},{x:x,y:y+hig}];
 6         var framearea=[x,y,wid,hig];//framearea是操作范围的边界，矩形切割则直接是矩形本身，多边形切割则应是多边形的外切矩形范围
 7         cutPath(path,framearea,wid2,hig2);
 8 
 9     }
10     function cutPath(path,framearea,wid2,hig2)
11     {
12         var len=path.length;
13         var con_mask=can_mask.getContext("2d");
14         con_mask.strokeStyle="rgba(160,197,232,1)";//线框
15         con_mask.beginPath();
16         for(var i=0;i<len;i++)
17         {
18             var point=path[i];
19             if(i==0)
20             {
21                 con_mask.moveTo(point.x,point.y);
22             }
23             else {
24                 con_mask.lineTo(point.x,point.y);
25             }
26 
27         }
28         con_mask.closePath();//在提示画布中绘制提示框
29         con_mask.stroke();
30         //con_mask.Path;
31 
32 
33         var con_maskbak=can_maskbak.getContext("2d");
34         con_maskbak.beginPath();
35         con_maskbak.fillStyle="rgba(0,255,0,1)";
36         con_maskbak.lineWidth=0;
37         for(var i=0;i<len;i++)
38         {
39             var point=path[i];
40             con_maskbak.lineTo(point.x,point.y);
41         }
42         con_maskbak.closePath();
43         con_maskbak.fill();//在范围画布中画出切割的范围（纯绿色）
44 
45         var con_source=can_source.getContext("2d");
46         var data_source=con_source.getImageData(framearea[0],framearea[1],framearea[2],framearea[3]);//获取源画布在操作范围内的像素
47         var data_maskbak=con_maskbak.getImageData(framearea[0],framearea[1],framearea[2],framearea[3]);//获取范围画布在操作范围内的像素
48 
49         var can_temp=document.createElement("canvas");//建立一个暂存canvas作为工具，并不实际显示它。
50         can_temp.width=wid2||framearea[2];//设置暂存画布的尺寸，这里要把长方形的切图保存为正方形！
51         can_temp.height=hig2||framearea[3];
52         var con_temp=can_temp.getContext("2d");
53         con_temp.fillStyle="rgba(255,255,255,1)";
54         con_temp.fillRect(0,0,can_temp.width,can_temp.height);
55         var data_res=con_temp.createImageData(framearea[2],framearea[3]);//建立暂存画布大小的像素数据
56 
57 
58         var len=data_maskbak.data.length;
59         for(var i=0;i<len;i+=4)//对于范围画布的每一个像素
60         {
61             if(data_maskbak.data[i+1]=255)//如果这个像素是绿色
62             {
63                 data_res.data[i]=(data_source.data[i]);//则填充源画布的对应像素
64                 data_res.data[i+1]=(data_source.data[i+1]);
65                 data_res.data[i+2]=(data_source.data[i+2]);
66                 data_res.data[i+3]=(data_source.data[i+3]);
67             }
68             else
69             {
70                 data_res.data[i]=(255);//否则填充完全不透明的白色，注意不透明度通道在rgba表示中是0到1，在data表示中是0到255！
71                 data_res.data[i+1]=(255);
72                 data_res.data[i+2]=(255);
73                 data_res.data[i+3]=(255);
74             }
75         }
76         con_temp.putImageData(data_res,(can_temp.width-framearea[2])/2,(can_temp.height-framearea[3])/2)//把填充完毕的像素数据放置在暂存画布的中间
77         console.log(can_temp.toDataURL());//以dataUrl方式输出暂存画布的数据
78 
79     }