welCropper

herramienta de captura de pantalla del subprograma welCropper WeChat

lista de tareas pendientes

• Cuadrados fijos (página beta)

Aviso

• No se recomienda usarlo en imágenes que son demasiado grandes. Algunos modelos causarán fallas (la razón puede ser que el tamaño de la imagen después de dibujarla en canvas es mucho mayor que la imagen original. A veces fallará en el al principio y, a veces, llamar wx.canvasToTempFilePath fallará)

----

Versión wepy (otros pueden comprobarlo según mi paquete. No lo he probado. Si lo necesita, puede probarlo)

callmesoul/wepy-corpper

Estructura del directorio de archivos. Para ejecutar en la máquina de prueba, seleccione la carpeta del proyecto para el directorio project .

 .
├── 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

• Asegure la calidad de la imagen, también puede optar por comprimir la imagen.
• Admite rotación de imagen
• Seleccione libremente el marco de la captura de pantalla

Dos modos

A través de mode de showCropper

• modo:'rectángulo' devuelve la imagen
• modo: 'cuadrilátero' no devuelve la imagen, solo los cuatro puntos de la imagen, que se utilizan para la corrección de perspectiva (puede encontrar información relacionada con OpenCV)

Documentos

• La razón para usar movable-view es que no necesita implementar arrastrar y soltar usted mismo y usar directamente el componente oficial.

Debido a que los datos y eventos del cropper están directamente vinculados a Page , se deben evitar los nombres de los datos y eventos (encontraremos formas de evitar esto más adelante) y sus explicaciones relacionadas:

Nombre en datos:

• cropperDatos
• cropperArtículos móviles
• cropperChangableData

Nombre de la función:

• mostrarCropper
• ocultarCropper
• originalCambiar
• recortarImagen
• cargarImagen
• lienzo claro
• dibujarImagen
• dibujarImagen original
• dibujarlíneas
• configurarMoveItem
• moverEvento
• evento final

Solo showCropper y hideCropper se usan externamente

 /**
    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]]
})

usar

Copie welCropper a su propio proyecto (tome /pages/index/index como ejemplo)

Instalar a través de npm

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

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

Si se instala a través de npm debe modificar la ruta de importación correspondiente.

Por ejemplo, versión template :

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

En la página de versión component json :

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

importaciones y llamadas wxml :

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

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

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

Introducción wxss :

 @import "/welCropper/welCropper.wxss";

Introducción y uso 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
                // 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
                    }
                })
            }
        })
    }
})