小程序模板网

截图组件welCropper,实现原理及其使用

2018-04-25 黄縢酒

最近做项目的时候,需要做一个截图功能。用了一个别人写的截图工具,发现截出的图质量下降了,但是我们图片要用来做识别, 需要保证截出的图质量不下降。而且也不支持通过拖动来调整截图框的大小。所以这个截图工具无法满足需求。因为所以,就自己动手写了一个截图组件。

下面介绍一下实现原理和使用方法。

实现原理

组件wxml的层次结构图如下:

  • original canvas 用来绘制原图大小的图片,这样能保证截图后的质量不会下降,这个canvas是隐藏的。
  • movable-area是movable-view的容器,是官方提供的拖拽移动组件,用来移动截取框的四个角。这个组件支持多个点同时移动。
  • scale canvas用来绘制适应屏幕比例大小的图片(aspectFit),因为通常原图大小是超过屏幕长宽的。
  • move canvas是根据四个movable-view的位置绘制出截图框。

最后截图,通过四个点的位置计算出截图框的位置,然后放大对应原图大小的位置,得到在原图中的(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. )}

最后截图,通过四个点的位置计算出截图框的位置,然后放大对应原图大小的位置,得到在原图中的(x, y, width, height),最后通过官方提供的canvas接口截图。

特点

  • 保证截图质量不会被压缩
  • 截图框能够通过拖拽来调整大小

使用

假设我们的应用文件结构如下:

 

						
  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

调用组件时,需要传入cropperData和cropperMovableItems,因为数据和事件都是绑定在Page上的,所以要避免使用组件里面已经被占用的命名。  /pages/index/index.wxml

 

						
  1. <!-- 引入组件 -->
  2. <import src="/welCropper/welCropper.wxml" />
  3.  
  4. <!-- 调用组件 -->
  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. // 获取显示区域长宽
  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. // 初始化组件数据和绑定事件
  16. cropper.init.apply(that, [W, H]);
  17. },
  18. selectTap() {
  19. var that = this
  20.  
  21. wx.chooseImage({
  22. count: 1, // 默认9
  23. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  24. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  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() //隐藏,我在项目里是点击完成就上传,所以如果回调是上传,那么隐藏掉就行了,不用previewImage
  38. })
  39. }
  40. })
  41. }
  42. })

最后引入组件的样式  /pages/index/index.wxss

 

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

效果图

截图

如果将movable-view显示出来是这样的:

源代码: Github:tomfriwel/welCropper,将welCropper文件夹复制到自己项目,引入调用就行了。

如果出现什么bug、问题或者建议可以告诉我,我会尽量改进。



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23942.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询