小程序模板網(wǎng)

截圖組件welCropper,實現(xiàn)原理及其使用

發(fā)布時間:2018-04-25 08:50 所屬欄目:小程序開發(fā)教程

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

下面介紹一下實現(xiàn)原理和使用方法。

實現(xiàn)原理

組件wxml的層次結(jié)構(gòu)圖如下:

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

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

 

						
  1. wx.canvasToTempFilePath({
  2. x: x,
  3. y: y,
  4. width: w,
  5. height: h,
  6. destWidth: w,
  7. destHeight: h,
  8. canvasId: 'originalCanvas',
  9. success: function (res) {
  10. }
  11. )}

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

特點

  • 保證截圖質(zhì)量不會被壓縮
  • 截圖框能夠通過拖拽來調(diào)整大小

使用

假設(shè)我們的應(yīng)用文件結(jié)構(gòu)如下:

 

						
  1. ./
  2. ├── app.js
  3. ├── app.json
  4. ├── app.wxss
  5. ├── pages
  6. │ └── index
  7. │ ├── index.js
  8. │ ├── index.json
  9. │ ├── index.wxml
  10. │ └── index.wxss
  11. └── welCropper
  12. ├── welCropper.js
  13. ├── welCropper.wxml
  14. └── welCropper.wxss

調(diào)用組件時,需要傳入cropperData和cropperMovableItems,因為數(shù)據(jù)和事件都是綁定在Page上的,所以要避免使用組件里面已經(jīng)被占用的命名。  /pages/index/index.wxml

 

						
  1. <!-- 引入組件 -->
  2. <import src="/welCropper/welCropper.wxml" />
  3.  
  4. <!-- 調(diào)用組件 -->
  5. <template is="welCropper" data="{{data:cropperData, cropperMovableItems:cropperMovableItems}}"></template>
  6.  
  7. <!-- 用于選擇圖片,傳入cropper中 -->
  8. <button bindtap='selectTap'>select image</button>

/pages/index/index.js

 

						
  1. // 獲取顯示區(qū)域長寬
  2. const device = wx.getSystemInfoSync()
  3. const W = device.windowWidth
  4. const H = device.windowHeight - 50
  5.  
  6. let cropper = require('../../welCropper/welCropper.js');
  7.  
  8. console.log(device)
  9.  
  10. Page({
  11. data: {
  12. },
  13. onLoad: function () {
  14. var that = this
  15. // 初始化組件數(shù)據(jù)和綁定事件
  16. cropper.init.apply(that, [W, H]);
  17. },
  18. selectTap() {
  19. var that = this
  20.  
  21. wx.chooseImage({
  22. count: 1, // 默認(rèn)9
  23. sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
  24. sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認(rèn)二者都有
  25. success(res) {
  26. const tempFilePath = res.tempFilePaths[0]
  27. console.log(tempFilePath)
  28.  
  29. // 將選取圖片傳入cropper,并顯示cropper
  30. that.showCropper(tempFilePath, (resPath) => {
  31. console.log("crop callback:" + resPath)
  32. wx.previewImage({
  33. current: '',
  34. urls: [resPath]
  35. })
  36.  
  37. // that.hideCropper() //隱藏,我在項目里是點擊完成就上傳,所以如果回調(diào)是上傳,那么隱藏掉就行了,不用previewImage
  38. })
  39. }
  40. })
  41. }
  42. })

最后引入組件的樣式  /pages/index/index.wxss

 

						
  1. @import "/welCropper/welCropper.wxss";
  2.  

效果圖

截圖

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

源代碼: Github:tomfriwel/welCropper,將welCropper文件夾復(fù)制到自己項目,引入調(diào)用就行了。

如果出現(xiàn)什么bug、問題或者建議可以告訴我,我會盡量改進。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23942.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢