截圖組件welCropper，實現原理及其使用

封面

最近做項目的時候，需要做一個截圖功能。用了一個別人寫的截圖工具，發現截出的圖質量下降了，但是我們圖片要用來做識別, 需要保證截出的圖質量不下降。而且也不支持通過拖動來調整截圖框的大小。所以這個截圖工具無法滿足需求。因為所以，就自己動手寫了一個截圖組件。

下面介紹一下實現原理和使用方法。

實現原理

組件wxml的層次結構圖如下：

hierarchy.png

• original canvas 用來繪製原圖大小的圖片，這樣能保證截圖後的質量不會下降，這個canvas是隱藏的。
• movable-area是movable-view的容器，是官方提供的拖拽移動組件，用來移動截取框的四個角。這個組件支持多個點同時移動。
• scale canvas用來繪製適應屏幕比例大小的圖片（aspectFit），因為通常原圖大小是超過屏幕長寬的。
• move canvas是根據四個movable-view的位置繪製出截圖框。

最後截圖，通過四個點的位置計算出截圖框的位置，然後放大對應原圖大小的位置，得到在原圖中的(x, y, width, height)，最後通過官方提供的canvas介面截圖。

wx.canvasToTempFilePath({n x: x,n y: y,n width: w,n height: h,n destWidth: w,n destHeight: h,n canvasId: originalCanvas,n success: function (res) {n}n)}n

最後截圖，通過四個點的位置計算出截圖框的位置，然後放大對應原圖大小的位置，得到在原圖中的(x, y, width, height)，最後通過官方提供的canvas介面截圖。

特點

• 保證截圖質量不會被壓縮
• 截圖框能夠通過拖拽來調整大小

使用

假設我們的應用文件結構如下：

./n├── app.jsn├── app.jsonn├── app.wxssn├── pagesn│ └── indexn│ ├── index.jsn│ ├── index.jsonn│ ├── index.wxmln│ └── index.wxssn└── welCroppern├── welCropper.jsn├── welCropper.wxmln└── welCropper.wxssn

調用組件時，需要傳入cropperData和cropperMovableItems，因為數據和事件都是綁定在Page上的，所以要避免使用組件裡面已經被佔用的命名。

<!-- 引入組件 -->n<import src="/welCropper/welCropper.wxml" />nn<!-- 調用組件 -->n<template is="welCropper" data="{{data:cropperData, cropperMovableItems:cropperMovableItems}}"></template>nn<!-- 用於選擇圖片，傳入cropper中 -->n<button bindtap=selectTap>select image</button>n

/pages/index/index.js

// 獲取顯示區域長寬nconst device = wx.getSystemInfoSync()nconst W = device.windowWidthnconst H = device.windowHeight - 50nnlet cropper = require(../../welCropper/welCropper.js);nnconsole.log(device)nnPage({n data: {n},n onLoad: function () {nvar that = thisn// 初始化組件數據和綁定事件n cropper.init.apply(that, [W, H]);n},n selectTap() {nvar that = thisnn wx.chooseImage({n count: 1, // 默認9n sizeType: [original, compressed], // 可以指定是原圖還是壓縮圖，默認二者都有n sourceType: [album, camera], // 可以指定來源是相冊還是相機，默認二者都有n success(res) {nconst tempFilePath = res.tempFilePaths[0]n console.log(tempFilePath)nn// 將選取圖片傳入cropper，並顯示croppern that.showCropper(tempFilePath, (resPath) => {n console.log("crop callback:" + resPath)n wx.previewImage({n current: ,n urls: [resPath]n})nn// that.hideCropper() //隱藏，我在項目里是點擊完成就上傳，所以如果回調是上傳，那麼隱藏掉就行了，不用previewImagen})n}n})n}n})n

最後引入組件的樣式

@import "/welCropper/welCropper.wxss";n

效果圖

效果動圖

截圖

如果將movable-view顯示出來是這樣的：

顯示movable-view後

源代碼：

如果出現什麼bug、問題或者建議可以告訴我，我會盡量改進。

原作者: tomfriwel 來自: 簡書

原文鏈接：截圖組件welCropper，實現原理及其使用

推薦閱讀：