用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

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

Rolan 2017-9-25 00:04

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

封面

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

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

实现原理

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

hierarchy.png
  • original canvas 用来绘制原图大小的图片,这样能保证截图后的质量不会下降,这个canvas是隐藏的。
  • movable-areamovable-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. <template is="welCropper" data="{{data:cropperData, cropperMovableItems:cropperMovableItems}}"></template>
  5. <!-- 用于选择图片,传入cropper中 -->
  6. <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. let cropper = require('../../welCropper/welCropper.js');
  6. console.log(device)
  7. Page({
  8. data: {
  9. },
  10. onLoad: function () {
  11. var that = this
  12. // 初始化组件数据和绑定事件
  13. cropper.init.apply(that, [W, H]);
  14. },
  15. selectTap() {
  16. var that = this
  17. wx.chooseImage({
  18. count: 1, // 默认9
  19. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  20. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  21. success(res) {
  22. const tempFilePath = res.tempFilePaths[0]
  23. console.log(tempFilePath)
  24. // 将选取图片传入cropper,并显示cropper
  25. that.showCropper(tempFilePath, (resPath) => {
  26. console.log("crop callback:" + resPath)
  27. wx.previewImage({
  28. current: '',
  29. urls: [resPath]
  30. })
  31. // that.hideCropper() //隐藏,我在项目里是点击完成就上传,所以如果回调是上传,那么隐藏掉就行了,不用previewImage
  32. })
  33. }
  34. })
  35. }
  36. })

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

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

效果图

效果动图

截图

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

显示movable-view后

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

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


鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: tomfriwel 来自: 简书

相关阅读

  • 凌子叶2011 2017-9-30 17:57
    很不错的案例,一直没见有这样的例子,我马上试下,多谢分享
  • wx_f839b158a3 2017-9-25 10:03
    贵人啊,找了一个多月没找到合适的。太感谢分享 了。解决项目难题