裁剪图片 angular

 

  1 drawCanvas(img_url) {
  2         const communityThis = this;
  3         let image, swidth, sheight, source, cover, target, draging, zoom;
  4         // init
  5         this.sourceWidth = 500;  // 显示图片宽度
  6         this.coverWidth = 200;  // 选区框宽度
  7         this.targetWidth = 100;  // 预览框宽度
  8         this.targetX = 0;  // 目标点 X 坐标
  9         this.targetY = 0;  // 目标点 Y 坐标
 10         this.scale = 1;  // 压缩比
 11         image = new Image();
 12         image.src = img_url;
 13         // image.setAttribute('crossOrigin', 'Anonymous');
 14         image.onload = () => {
 15             draging = false;  // 是否移动选取框
 16             zoom = false;  // 是否缩放选取框
 17             swidth = image.width;
 18             sheight = image.height;
 19             communityThis.scale = communityThis.sourceWidth / swidth >= 1 ? 1 : communityThis.sourceWidth / swidth;  // 压缩比
 20             if (swidth >= sheight) {  // cover area width， 选取框宽度 = min(原图高， 原图宽，前面定义的选取框宽)
 21                 communityThis.coverWidth = sheight > communityThis.coverWidth ? communityThis.coverWidth : sheight * communityThis.scale;
 22             } else {
 23                 communityThis.coverWidth = swidth > communityThis.coverWidth ? communityThis.coverWidth : swidth * communityThis.scale;
 24             }
 25             communityThis.sourceWidth = communityThis.scale >= 1 ? swidth : communityThis.sourceWidth; // source image width， 如果原图大于500， 宽度压缩成500
 26 
 27             // draw source image
 28             source = document.getElementsByTagName('canvas')[0].getContext('2d');
 29             document.getElementsByTagName('canvas')[0].width = communityThis.sourceWidth;
 30             document.getElementsByTagName('canvas')[0].height = sheight * communityThis.scale;
 31             source.scale(communityThis.scale, communityThis.scale);
 32             source.drawImage(image, 0, 0);
 33 
 34             // draw cover area
 35             cover = document.getElementsByTagName('canvas')[1].getContext('2d');
 36             document.getElementsByTagName('canvas')[1].width = communityThis.sourceWidth;
 37             document.getElementsByTagName('canvas')[1].height = sheight * communityThis.scale;
 38             cover.fillStyle = 'rgba(243, 237, 237, 0.6)';
 39             cover.fillRect(0, 0, communityThis.sourceWidth, sheight * communityThis.scale);  // 绘制遮布
 40             cover.clearRect(0, 0, communityThis.coverWidth, communityThis.coverWidth);  // 绘制选区框
 41             cover.strokeStyle = 'rgb(247, 30, 53)';  // 绘制缩放区，正方形（10*10）
 42             cover.strokeRect(communityThis.coverWidth - 5, communityThis.coverWidth - 5, 10, 10);
 43 
 44             // draw preview image
 45             target = document.getElementsByTagName('canvas')[2].getContext('2d');
 46             document.getElementsByTagName('canvas')[2].width = communityThis.coverWidth;
 47             document.getElementsByTagName('canvas')[2].height = communityThis.coverWidth;
 48             target.drawImage(image, 0, 0, communityThis.coverWidth / communityThis.scale, communityThis.coverWidth / communityThis.scale,
 49                 0, 0, communityThis.targetWidth, communityThis.targetWidth);
 50 
 51             document.getElementsByTagName('body')[0].onmousemove = function(e) {
 52                 this.onmouseup = function() {
 53                     draging = false;
 54                     zoom = false;
 55                 };
 56             };
 57 
 58             document.getElementsByTagName('canvas')[1].onmousemove = function (e) {
 59                 this.onmousedown = (function (the) {
 60                     return function (arg) {// 如果鼠标在缩放区
 61                         if (arg.offsetX >= communityThis.targetX + communityThis.coverWidth - 5
 62                             && arg.offsetX <= communityThis.targetX + communityThis.coverWidth + 5
 63                             && arg.offsetY >= communityThis.targetY + communityThis.coverWidth - 5
 64                             && arg.offsetY <= communityThis.targetY + communityThis.coverWidth + 5) {
 65                             zoom = true;
 66                         } else { // 不在缩放区
 67                             draging = true;
 68                         }
 69                     };
 70                 })(e);
 71                 this.onmouseup = function () {
 72                     draging = false;
 73                     zoom = false;
 74                 };
 75                 if (zoom) {
 76                     const newWidth = Math.min(e.offsetX - communityThis.targetX);  
 77                     const newHeight = Math.min(e.offsetY - communityThis.targetY);
 78                     if (newWidth > 50 && newHeight > 50) {
 79                         communityThis.coverWidth = Math.min(newHeight, newWidth);  // 新的选取框宽度
 80                         // redraw selest area
 81                         cover.clearRect(0, 0, cover.width, cover.height);
 82                         document.getElementsByTagName('canvas')[1].width = communityThis.sourceWidth;
 83                         document.getElementsByTagName('canvas')[1].height = sheight * communityThis.scale;
 84                         cover.fillStyle = 'rgba(243, 237, 237, 0.6)';
 85                         cover.fillRect(0, 0, communityThis.sourceWidth, sheight * communityThis.scale);
 86                         cover.clearRect(communityThis.targetX, communityThis.targetY, communityThis.coverWidth, communityThis.coverWidth);
 87                         cover.strokeStyle = 'rgb(247, 30, 53)';
 88                         cover.strokeRect(communityThis.targetX + communityThis.coverWidth - 5,
 89                             communityThis.targetY + communityThis.coverWidth - 5, 10, 10);
 90 
 91                         // redraw target image
 92                         target.clearRect(0, 0, target.width, target.height);
 93                         document.getElementsByTagName('canvas')[2].width = communityThis.targetWidth;
 94                         document.getElementsByTagName('canvas')[2].height = communityThis.targetWidth;
 95                         target.drawImage(image, communityThis.targetX / communityThis.scale, communityThis.targetY / communityThis.scale,
 96                             communityThis.coverWidth / communityThis.scale, communityThis.coverWidth / communityThis.scale,
 97                             0, 0, communityThis.targetWidth, communityThis.targetWidth);
 98                     }
 99                 }
100                 if (draging) {
101                     communityThis.targetX = e.offsetX; // target cooridinate X
102                     communityThis.targetY = e.offsetY;
103                     // 如果鼠标点不能完整绘制选取区，适当移动选区框绘制起点
104                     if (e.offsetX + communityThis.coverWidth > communityThis.sourceWidth) {
105                         communityThis.targetX = communityThis.sourceWidth - communityThis.coverWidth;
106                     }
107                     if (e.offsetY + communityThis.coverWidth > sheight * communityThis.scale) {
108                         communityThis.targetY = sheight * communityThis.scale - communityThis.coverWidth;
109                     }
110                     // redraw selest area
111                     cover.clearRect(0, 0, cover.width, cover.height);
112                     document.getElementsByTagName('canvas')[1].width = communityThis.sourceWidth;
113                     document.getElementsByTagName('canvas')[1].height = sheight * communityThis.scale;
114                     cover.fillStyle = 'rgba(243, 237, 237, 0.6)';
115                     cover.fillRect(0, 0, communityThis.sourceWidth, sheight * communityThis.scale);
116                     cover.clearRect(communityThis.targetX, communityThis.targetY, communityThis.coverWidth, communityThis.coverWidth);
117                     cover.strokeStyle = 'rgb(247, 30, 53)';
118                     cover.strokeRect(communityThis.targetX + communityThis.coverWidth - 5,
119                         communityThis.targetY + communityThis.coverWidth - 5, 10, 10);
120 
121                     // redraw target image
122                     target.clearRect(0, 0, target.width, target.height);
123                     document.getElementsByTagName('canvas')[2].width = communityThis.targetWidth;
124                     document.getElementsByTagName('canvas')[2].height = communityThis.targetWidth;
125                     target.drawImage(image, communityThis.targetX / communityThis.scale, communityThis.targetY / communityThis.scale,
126                         communityThis.coverWidth / communityThis.scale, communityThis.coverWidth / communityThis.scale,
127                         0, 0, communityThis.targetWidth, communityThis.targetWidth);
128                 }
129             };
130         };
131     }

 

 

效果图：

转载于:https://www.cnblogs.com/luomi/p/9628741.html