This article introduces you to the mobile terminal image cropping component function based on Vue. Because the mobile terminal uses vue, it is written as a vue component. Here are some of my implementation ideas. Friends who need it can refer to it. Next

I am working on a recent project to build a license plate recognition function. I originally thought it was very simple, just throw the image to the background, but after testing, the recognition rate was only 20-40%. Therefore, the product recommends that after taking a picture, you can drag and zoom the picture, then crop the license plate part and upload it to the background to improve the recognition rate. At the beginning, I checked Baidu to see if there were any ready-made components, but I couldn't find a suitable one. Fortunately, I wasn't very anxious about this function, so I studied it at home on the weekend.

Demo address: https://vivialex.github.io/demo/imageClipper/index.html

Download address: https://github.com/vivialex/vue-imageClipper

Since the mobile terminal uses Vue, I wrote it as a Vue component. Let’s talk about some of my implementation ideas (I have limited skills, please understand. In addition, the code shown is not necessarily complete for a certain function. Code), let’s take a look at the effect first:

1. Initialization parameters of the component

1. Image img (url or base64 data-url)

2. Screenshot width clipperImgWidth

3. Screenshot height clipperImgHeight

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

2 , Layout

Viewed in the Z-axis direction, it is mainly composed of 4 layers. The first layer is a canvas (called cCanvas) that occupies the entire container; the second layer is a transparent mask layer; the third layer is the cropped area (the white box in the example picture), which contains a Canvas with equal area sizes (called pCanvas); the fourth layer is a transparent layer gesture-mask, used to bind touchstart, touchmove, touchend events. Both canvases will load the same picture, but the starting coordinates are different. Why do we need two canvases? Because I want to create the effect that when the finger leaves the screen, part of the surface outside the cropping area will have a mask layer effect, which can highlight the content of the cropping area.

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

　 3. Initialize canvas

Pictures drawn by canvas will appear blurry on the hdpi display. The specific reasons will not be analyzed here. You can refer to Get off here. What I do here is to make the width and height of the canvas times the devicePixelRatio of its css width/height, and the parameters passed in when calling the canvas api must be multiplied by window.devicePixelRatio. Finally, record the x, y difference between the two canvas coordinate origins (originXDiff and originYDiff). As follows

_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
  }

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

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

  //計(jì)算兩個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;
}

　 IV. Loading images

Loading images is relatively simple. First, create an Image object and listen to the onload event (because the loaded The image may be cross-domain, so set its crossOrigin attribute to Anonymous, and then set the Access-Control-Allow-Origin response header on the server). If the width and height of the loaded image are greater than the width and height of the container, they must be reduced. Finally, vertically and horizontally centered display () (note here is to save the width and height value before the picture is drawn, because the future scaling of the picture will be based on this value and then multiplied by the zoom factor, here take imgStartWidth, imgStartHeight) as follows

_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'; //因?yàn)閏anvas 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);
  }
}

　 5. Draw the picture

The following _drawImage has four parameters, which are the x, y coordinates of the picture corresponding to cCanvas and the current width and height w of the picture. ,h. The function will first clear the contents of the two canvases by resetting the width and height of the canvas. Then update the corresponding value in the component instance, and finally call the drawImage of the two canvases to draw the picture. For pCanvas, the coordinate values ??of the picture drawn are x and y minus the corresponding originXDiff and originYDiff (actually it is equivalent to switching the coordinate system display, so you only need to subtract the x and y difference between the origins of the two coordinate systems) ). Take a look at the code

_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;
}

　 6. Moving pictures

The implementation of moving pictures is very simple. First, bind touchstart, touchmove, touchend to gesture-mask. Events, the contents of these three events are introduced below

First define four variables scx, scy (the starting coordinates of the finger), iX, iY (the current coordinates of the picture, relative to cCanvas).

1. touchstart

The method is very simple, just get the pageX and pageY of touches[0] to update scx and scy and update iX and iY

2. touchmove

Get the page

Let’s take a look at the code

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

　　 七、縮放圖片（這里不作特別說明的坐標(biāo)都是相對于cCanvas坐標(biāo)系）

　　繪制縮放后的圖片無非需要4個參數(shù)，縮放后圖片左上角的坐標(biāo)以及寬高。求寬高相對好辦，寬高等于imgStartWidth * 縮放比率與imgstartHeight * 縮放倍率（imgStartWidth ，imgstartHeight 上文第四節(jié)有提到）。接下來就是求縮放倍率的問題了，首先在touchstart事件上求取兩手指間的距離d1；然后在touchmove事件上繼續(xù)求取兩手指間的距離d2，當(dāng)前縮放倍率= 初始縮放倍率 + (d2-d1) / 步長（例如每60px算0.1），touchend事件上讓初始縮放倍率=當(dāng)前縮放倍率。

　　至于如何求取縮放后圖片左上角的坐標(biāo)值，在草稿紙上畫來畫去，畫了很久......終于有點(diǎn)眉目。首先要找到一個縮放中心（這里做法是取雙指的中點(diǎn)坐標(biāo)，但是這個坐標(biāo)必須要位于圖片上，如果不在圖片上，則取圖片上離該中點(diǎn)坐標(biāo)最近的點(diǎn)），然后存在下面這個等式

　?。s放中心x坐標(biāo) - 縮放后圖片左上角x坐標(biāo)）/ 縮放后圖片的寬度 = （縮放中心x坐標(biāo) - 縮放前圖片左上角x坐標(biāo)）/ 縮放前圖片的寬度；（y坐標(biāo)同理）

　　接下來看看下面這個例子（在visio找了很久都沒有畫坐標(biāo)系的功能，所以只能手工畫了）

　　綠色框是一張10*5的圖片，藍(lán)色框是寬高放大兩倍后的圖片20*10，根據(jù)上面的公式推算的x2 = sx - w2(sx - x1) / w1，y2 = sy - h2(sy - y1) / h1。

　　堅(jiān)持...繼續(xù)看看代碼吧

_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(&#39;touchmove&#39;, 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(&#39;touchend&#39;, 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，因?yàn)榭赡芸s放后立即單指拖動
    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)));
}

　　說明一下fingers是干嘛的，是用來記錄當(dāng)前有多少只手指在屏幕上觸摸?？赡軙霈F(xiàn)這種情況，雙指縮放后，其中一只手指移出顯示屏，而另外一個手指在顯示屏上移動。針對這種情況，要在touchend事件上根據(jù)e.changedTouches來移除fingers里已經(jīng)離開顯示屏的finger，如果此時fingers里只剩下一個finger，則更新scx，scy，iX，iY為移動圖片做初始化準(zhǔn)備。

　　八、裁剪圖片

　　這里很簡單，就調(diào)用pCanvas的toDataURL方法就可以了

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

上面是我整理給大家的，希望今后會對大家有幫助。

相關(guān)文章：

在Bootstrap框架里使用treeview如何實(shí)現(xiàn)動態(tài)加載數(shù)據(jù)

在Nginx中如何配置多站點(diǎn)vhost

在vue中如何實(shí)現(xiàn)跳轉(zhuǎn)到之前頁面

在express+mockjs中如何實(shí)現(xiàn)后臺數(shù)據(jù)發(fā)送

The above is the detailed content of How to implement image cropping component using Vue mobile terminal. For more information, please follow other related articles on the PHP Chinese website!