基于Vue的移動端圖片裁剪組件功能

props: {
 img: String, //url或dataUrl
 clipperImgWidth: {
 type: Number,
 default: 500
 },
 clipperImgHeight: {
 type: Number,
 default: 200
 }
}

<div class="cut-container" ref="cut">
 <canvas ref="canvas"></canvas>
 <!-- 裁剪部分 -->
 <div class="cut-part">
 <div class="pCanvas-container">
 <canvas ref="pCanvas"></canvas>
 </div>
 </div>
 <!-- 底部操作欄 -->
 <div class="action-bar">
 <button class="btn-cancel" @click="_cancel">取消</button>
 <button class="btn-ok" @click="_cut">確認(rèn)</button>
 </div>
 <!-- 背景遮罩 -->
 <div class="mask" :class="{opacity: maskShow}"></div>
 <!-- 手勢操作層 -->
 <div class="gesture-mask" ref="gesture"></div>
</div>

_ratio(size) {
 return parseInt(window.devicePixelRatio * size);
},
_initCanvas() {
 let $canvas = this.$refs.canvas,
 $pCanvas = this.$refs.pCanvas,
 clipperClientRect = this.$refs.clipper.getBoundingClientRect(),
 clipperWidth = parseInt(this.clipperImgWidth / window.devicePixelRatio),
 clipperHeight = parseInt(this.clipperImgHeight / window.devicePixelRatio);

 this.ctx = $canvas.getContext('2d');
 this.pCtx = $pCanvas.getContext('2d');

 //判斷clipperWidth與clipperHeight有沒有超過容器值
 if (clipperWidth < 0 || clipperWidth > clipperClientRect.width) {
 clipperWidth = 250
 }

 if (clipperHeight < 0 || clipperHeight > clipperClientRect.height) {
 clipperHeight = 100
 }

 //因為canvas在手機(jī)上會被放大，因此里面的內(nèi)容會模糊，這里根據(jù)手機(jī)的devicePixelRatio來放大canvas，然后再通過設(shè)置css來收縮，因此關(guān)于canvas的所有值或坐標(biāo)都要乘以devicePixelRatio
 $canvas.style.width = clipperClientRect.width + 'px';
 $canvas.style.height = clipperClientRect.height + 'px';
 $canvas.width = this._ratio(clipperClientRect.width);
 $canvas.height = this._ratio(clipperClientRect.height);

 $pCanvas.style.width = clipperWidth + 'px';
 $pCanvas.style.height = clipperHeight + 'px';
 $pCanvas.width = this._ratio(clipperWidth);
 $pCanvas.height = this._ratio(clipperHeight);

 //計算兩個canvas原點(diǎn)的x y差值
 let cClientRect = $canvas.getBoundingClientRect(),
 pClientRect = $pCanvas.getBoundingClientRect();

 this.originXDiff = pClientRect.left - cClientRect.left;
 this.originYDiff = pClientRect.top - cClientRect.top;
 this.cWidth = cClientRect.width;
 this.cHeight = cClientRect.height;
}

_loadImg() {
 if (this.imgLoading || this.loadImgQueue.length === 0) {
 return;
 }
 let img = this.loadImgQueue.shift();
 if (!img) {
 return;
 }
 let $img = new Image(),
 onLoad = e => {
 $img.removeEventListener('load', onLoad, false);
 this.$img = $img;
 this.imgLoaded = true;
 this.imgLoading = false;
 this._initImg($img.width, $img.height);
 this.$emit('loadSuccess', e);
 this.$emit('loadComplete', e);
 this._loadImg();
 },
 onError = e => {
 $img.removeEventListener('error', onError, false);
 this.$img = $img = null;
 this.imgLoading = false;
 this.$emit('loadError', e);
 this.$emit('loadComplete', e);
 this._loadImg();
 };
 this.$emit('beforeLoad');
 this.imgLoading = true;
 this.imgLoaded = false;
 $img.src = this.img;
 $img.crossOrigin = 'Anonymous'; //因為canvas toDataUrl不能操作未經(jīng)允許的跨域圖片，這需要服務(wù)器設(shè)置Access-Control-Allow-Origin頭
 $img.addEventListener('load', onLoad, false);
 $img.addEventListener('error', onError, false);
}
_initImg(w, h) {
 let eW = null,
 eH = null,
 maxW = this.cWidth,
 maxH = this.cHeight - this.actionBarHeight;
 //如果圖片的寬高都少于容器的寬高，則不做處理
 if (w <= maxW && h <= maxH) {
 eW = w;
 eH = h;
 } else if (w > maxW && h <= maxH) {
 eW = maxW;
 eH = parseInt(h / w * maxW);
 } else if (w <= maxW && h > maxH) {
 eW = parseInt(w / h * maxH);
 eH = maxH;
 } else {
 //判斷是橫圖還是豎圖
 if (h > w) {
 eW = parseInt(w / h * maxH);
 eH = maxH;
 } else {
 eW = maxW;
 eH = parseInt(h / w * maxW);
 }
 }
 if (eW <= maxW && eH <= maxH) {
 //記錄其初始化的寬高，日后的縮放功能以此值為基礎(chǔ)
 this.imgStartWidth = eW;
 this.imgStartHeight = eH;
 this._drawImage((maxW - eW) / 2, (maxH - eH) / 2, eW, eH);
 } else {
 this._initImg(eW, eH);
 }
}

_drawImage(x, y, w, h) {
 this._clearCanvas();
 this.imgX = parseInt(x);
 this.imgY = parseInt(y);
 this.imgCurrentWidth = parseInt(w);
 this.imgCurrentHeight = parseInt(h);
 //更新canvas
 this.ctx.drawImage(this.$img, this._ratio(x), this._ratio(y), this._ratio(w), this._ratio(h));
 //更新pCanvas，只需要減去兩個canvas坐標(biāo)原點(diǎn)對應(yīng)的差值即可
 this.pCtx.drawImage(this.$img, this._ratio(x - this.originXDiff), this._ratio(y - this.originYDiff), this._ratio(w), this._ratio(h));
},
_clearCanvas() {
 let $canvas = this.$refs.canvas,
 $pCanvas = this.$refs.pCanvas;
 $canvas.width = $canvas.width;
 $canvas.height = $canvas.height;
 $pCanvas.width = $pCanvas.width;
 $pCanvas.height = $pCanvas.height;
}

_initEvent() {
 let $gesture = this.$refs.gesture,
 scx = 0,
 scy = 0;
 let iX = this.imgX,
 iY = this.imgY;
 $gesture.addEventListener('touchstart', e => {
 if (!this.imgLoaded) {
 return;
 }
 let finger = e.touches[0];
 scx = finger.pageX;
 scy = finger.pageY;
 iX = this.imgX;
 iY = this.imgY; 
 }, false);
 $gesture.addEventListener('touchmove', e => {
 e.preventDefault();
 if (!this.imgLoaded) {
 return;
 }
 let f1x = e.touches[0].pageX,
 f1y = e.touches[0].pageY;
 this._drawImage(iX + f1x - scx, iY + f1y - scy, this.imgCurrentWidth, this.imgCurrentHeight);
 }, false);
} 

_initEvent() {
 let $gesture = this.$refs.gesture,
 cClientRect = this.$refs.canvas.getBoundingClientRect(),
 scx = 0, //對于單手操作是移動的起點(diǎn)坐標(biāo)，對于縮放是圖片距離兩手指的中點(diǎn)最近的圖標(biāo)。
 scy = 0,
 fingers = {}; //記錄當(dāng)前有多少只手指在觸控屏幕
 //one finger
 let iX = this.imgX,
 iY = this.imgY;
 //two finger
 let figureDistance = 0,
 pinchScale = this.imgScale;
 $gesture.addEventListener('touchstart', e => {
 if (!this.imgLoaded) {
 return;
 }
 if (e.touches.length === 1) {
 let finger = e.touches[0];
 scx = finger.pageX;
 scy = finger.pageY;
 iX = this.imgX;
 iY = this.imgY;
 fingers[finger.identifier] = finger;
 } else if (e.touches.length === 2) {
 let finger1 = e.touches[0],
 finger2 = e.touches[1],
 f1x = finger1.pageX - cClientRect.left,
 f1y = finger1.pageY - cClientRect.top,
 f2x = finger2.pageX - cClientRect.left,
 f2y = finger2.pageY - cClientRect.top;
 scx = parseInt((f1x + f2x) / 2);
 scy = parseInt((f1y + f2y) / 2);
 figureDistance = this._pointDistance(f1x, f1y, f2x, f2y);
 fingers[finger1.identifier] = finger1;
 fingers[finger2.identifier] = finger2;
 //判斷變換中點(diǎn)是否在圖片中，如果不是則去離圖片最近的點(diǎn)
 if (scx < this.imgX) {
 scx = this.imgX;
 }
 if (scx > this.imgX + this.imgCurrentWidth) {
 scx = this.imgX + this.imgCurrentHeight;
 }
 if (scy < this.imgY) {
 scy = this.imgY;
 }
 if (scy > this.imgY + this.imgCurrentHeight) {
 scy = this.imgY + this.imgCurrentHeight;
 }
 }
 }, false);
 $gesture.addEventListener('touchmove', e => {
 e.preventDefault();
 if (!this.imgLoaded) {
 return;
 }
 this.maskShowTimer && clearTimeout(this.maskShowTimer);
 this.maskShow = false;
 if (e.touches.length === 1) {
 let f1x = e.touches[0].pageX,
 f1y = e.touches[0].pageY;
 this._drawImage(iX + f1x - scx, iY + f1y - scy, this.imgCurrentWidth, this.imgCurrentHeight);
 } else if (e.touches.length === 2) {
 let finger1 = e.touches[0],
 finger2 = e.touches[1],
 f1x = finger1.pageX - cClientRect.left,
 f1y = finger1.pageY - cClientRect.top,
 f2x = finger2.pageX - cClientRect.left,
 f2y = finger2.pageY - cClientRect.top,
 newFigureDistance = this._pointDistance(f1x, f1y, f2x, f2y),
 scale = this.imgScale + parseFloat(((newFigureDistance - figureDistance) / this.imgScaleStep).toFixed(1));
 fingers[finger1.identifier] = finger1;
 fingers[finger2.identifier] = finger2;
 if (scale !== pinchScale) {
 //目前縮放的最小比例是1，最大是5
 if (scale < this.imgMinScale) {
 scale = this.imgMinScale;
 } else if (scale > this.imgMaxScale) {
 scale = this.imgMaxScale;
 }
 pinchScale = scale;
 this._scale(scx, scy, scale);
 }
 }
 }, false);
 $gesture.addEventListener('touchend', e => {
 if (!this.imgLoaded) {
 return;
 }
 this.imgScale = pinchScale;
 //從finger刪除已經(jīng)離開的手指
 let touches = Array.prototype.slice.call(e.changedTouches, 0);
 touches.forEach(item => {
 delete fingers[item.identifier];
 });
 //迭代fingers，如果存在finger則更新scx,scy,iX,iY，因為可能縮放后立即單指拖動
 let i,
 fingerArr = [];
 for(i in fingers) {
 if (fingers.hasOwnProperty(i)) {
 fingerArr.push(fingers[i]);
 }
 }
 if (fingerArr.length > 0) {
 scx = fingerArr[0].pageX;
 scy = fingerArr[0].pageY;
 iX = this.imgX;
 iY = this.imgY;
 } else {
 this.maskShowTimer = setTimeout(() => {
 this.maskShow = true;
 }, 300);
 }
 //做邊界值檢測
 let x = this.imgX,
 y = this.imgY,
 pClientRect = this.$refs.pCanvas.getBoundingClientRect();
 if (x > pClientRect.left + pClientRect.width) {
 x = pClientRect.left
 } else if (x + this.imgCurrentWidth < pClientRect.left) {
 x = pClientRect.left + pClientRect.width - this.imgCurrentWidth;
 }
 if (y > pClientRect.top + pClientRect.height) {
 y = pClientRect.top;
 } else if (y + this.imgCurrentHeight < pClientRect.top) {
 y = pClientRect.top + pClientRect.height - this.imgCurrentHeight;
 }
 if (this.imgX !== x || this.imgY !== y) {
 this._drawImage(x, y, this.imgCurrentWidth, this.imgCurrentHeight);
 }
 });
},
_scale(x, y, scale) {
 let newPicWidth = parseInt(this.imgStartWidth * scale),
 newPicHeight = parseInt(this.imgStartHeight * scale),
 newIX = parseInt(x - newPicWidth * (x - this.imgX) / this.imgCurrentWidth),
 newIY = parseInt(y - newPicHeight * (y - this.imgY) / this.imgCurrentHeight);
 this._drawImage(newIX, newIY, newPicWidth, newPicHeight);
},
_pointDistance(x1, y1, x2, y2) {
 return parseInt(Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)));
}

_clipper() {
 let imgData = null;
 try {
 imgData = this.$refs.pCanvas.toDataURL();
 } catch (e) {
 console.error('請在response header加上Access-Control-Allow-Origin，否則canvas無法裁剪未經(jīng)許可的跨域圖片');
 }
 this.$emit('sure', imgData);
}