welCropper

welCropper WeChat applet screenshot tool

todo list

• Fixed squares (beta page)

Notice

• It is not recommended to use it on images that are too large. Some models will cause crashes (the reason may be that the size of the image after drawing it on canvas is much larger than the original image. Sometimes it will crash at the beginning, and sometimes calling wx.canvasToTempFilePath will crash)

----

wepy version (others can check it out based on my package. I have not tested it. If you need it, you can try it)

callmesoul/wepy-corpper

File directory structure. To run on the test machine, select the project folder for the project directory.

 .
├── app.js
├── app.json
├── app.wxss
├── components
│   ├── room
│   │   ├── room.js
│   │   ├── room.json
│   │   ├── room.wxml
│   │   └── room.wxss
│   └── welCropper
│       ├── package.json
│       ├── welCropper.js
│       ├── welCropper.json
│       ├── welCropper.wxml
│       ├── welCropper.wxss
│       └── welCropperUtil.js
├── images
│   └── my.jpeg
├── pages
│   ├── componentTest
│   │   ├── componentTest.js
│   │   ├── componentTest.json
│   │   ├── componentTest.wxml
│   │   └── componentTest.wxss
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── test
│       ├── test.js
│       ├── test.json
│       ├── test.wxml
│       └── test.wxss
├── project.config.json
└── welCropper
    ├── package.json
    ├── welCropper.js
    ├── welCropper.wxml
    ├── welCropper.wxss
    └── welCropperUtil.js

• Ensure image quality, you can also choose to compress the image
• Support image rotation
• Freely select screenshot frame

Two modes

Through mode setting of showCropper

• mode:'rectangle' returns image
• mode:'quadrangle' does not return the image, only the four points in the image, which are used for perspective correction (you can find OpenCV related information)

Documents

• The reason for using movable-view is that you don’t need to implement drag and drop yourself and directly use the official component.

Because the data and events of cropper are directly bound to Page , the naming of the data and events should avoid names (we will find ways to avoid this later) and their related explanations:

Name in data:

• cropperData
• cropperMovableItems
• cropperChangableData

Function name:

• showCropper
• hideCropper
• originalChange
• cropImage
• loadImage
• clearCanvas
• drawImage
• drawOriginalImage
• drawLines
• setupMoveItem
• moveEvent
• endEvent

Only showCropper and hideCropper are used externally

 /**
    src:输入图片地址
    callback(res):点击“完成”按钮后毁掉函数，毁掉函数中会有截图地址
*/
showCropper({
    src,    //字符串, 图片path
    mode,   //字符串, "rectangle" 或 "quadrangle". quadrangle只会返回4个点的坐标. rectangle返回截图path
    sizeType,   //数组, ['original', 'compressed'], 默认original
    callback    //回调函数, callback(res): mode=rectangle, res=path; mode=quadrangle, res=[[x,y], [x,y], [x,y], [x,y]]
})

use

Copy welCropper to your own project (take /pages/index/index as an example)

Install via npm

$ npm install wel-cropper-template //for template

$ npm install wel-cropper-component //for component

If installed through npm you need to modify the corresponding import path.

For example, template version:

<import src="/node_modules/wel-cropper-template/welCropper" />

In component version page json :

 {
    ...
    "usingComponents": {
        "wel-cropper": "/node_modules/wel-cropper-component/welCropper"
    },
    ...
}

wxml imports and calls:

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

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

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

wxss introduction:

 @import "/welCropper/welCropper.wxss";

js introduction and use:

 // 获取显示区域长宽
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
                // maxLength=1000 默认2000，允许最大长宽，避免分辨率过大导致崩溃
                let modes = ["rectangle", "quadrangle"]
                let mode = modes[0]   //rectangle, quadrangle
                that.showCropper({
                    src: tempFilePath,
                    mode: mode,
                    sizeType: ['original', 'compressed'],   //'original'(default) | 'compressed'
                    maxLength: 1000,
                    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
                    }
                })
            }
        })
    }
})