小程序微信小程序(应用号)微信小程序

微信小程序:截图组件welCropper,实现原理及其使用

2017-09-22  本文已影响5275人  tomfriwel
封面 截图

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

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

实现原理

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

hierarchy.png

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

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

旋转原理

设置旋转圆点
旋转

特点

使用

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


./
├── app.js
├── app.json
├── app.wxss
├── pages
│   └── index
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
└── welCropper
    ├── welCropper.js
    ├── welCropper.wxml
    └── welCropper.wxss

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

<!-- 引入组件 -->
<import src="/welCropper/welCropper.wxml" />

<!-- 调用组件 -->
<template is="welCropper" data="{{data:cropperData, cropperMovableItems:cropperMovableItems, cropperChangableData:cropperChangableData}}"></template>

<!-- 用于选择图片,传入cropper中 -->
<button bindtap='selectTap'>select image</button>

/pages/index/index.js

// 获取显示区域长宽
const device = wx.getSystemInfoSync()
const W = device.windowWidth
const H = device.windowHeight - 50

let cropper = require('../../welCropper/welCropper.js');

console.log(device)

Page({
    data: {
    },
    onLoad: function () {
        var that = this
        // 初始化组件数据和绑定事件
        cropper.init.apply(that, [W, H]);
    },
    selectTap() {
        var that = this

        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
            success(res) {
                const tempFilePath = res.tempFilePaths[0]
                console.log(tempFilePath)
                
                // 将选取图片传入cropper,并显示cropper
                // mode=rectangle 返回图片path
                // mode=quadrangle 返回4个点的坐标,并不返回图片。这个模式需要配合后台使用,用于perspective correction
                let modes = ["rectangle", "quadrangle"]
                let mode = modes[0]   //rectangle, quadrangle
                that.showCropper({
                    src: tempFilePath,
                    mode: mode,
                    sizeType: ['original', 'compressed'],   //'original'(default) | 'compressed'
                    callback: (res) => {
                        if (mode == 'rectangle') {
                            console.log("crop callback:" + res)
                            wx.previewImage({
                                current: '',
                                urls: [res]
                            })
                        }
                        else {
                            wx.showModal({
                                title: '',
                                content: JSON.stringify(res),
                            })

                            console.log(res)
                        }

                        // that.hideCropper() //隐藏,我在项目里是点击完成就上传,所以如果回调是上传,那么隐藏掉就行了,不用previewImage
                    }
                })
            }
        })
    }
})

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

@import "/welCropper/welCropper.wxss";

注意

源代码

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

效果图

效果动图mode=rectangle 效果动图mode=quadrangle 效果图mode=rectangle

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

显示movable-view后 mode=quadrangle
上一篇下一篇

猜你喜欢

热点阅读