裁剪图片 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 }
效果图：
