welCropper 微信小程序截圖工具

文件目錄結(jié)構(gòu)，要在測(cè)試機(jī)上運(yùn)行，工程目錄選擇文件夾project

./
├── documents
│   ├── hierarchy.png
│   ├── result.gif
│   └── screenshot.jpeg
├── project
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   ├── pages
│   │   ├── index
│   │   │   ├── index.js
│   │   │   ├── index.json
│   │   │   ├── index.wxml
│   │   │   └── index.wxss
│   │   └── test
│   │       ├── test.js
│   │       ├── test.json
│   │       ├── test.wxml
│   │       └── test.wxss
│   ├── utils
│   │   └── util.js
│   └── welCropper
│       ├── welCropper.js
│       ├── welCropper.wxml
│       └── welCropper.wxss
└── readme.md

• 保證圖片質(zhì)量，也可以選擇壓縮圖

Documents

因?yàn)?code style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding: 0.2em 0px; margin: 0px; border-radius: 3px; background-color: rgba(27, 31, 35, 0.0470588);">cropper的數(shù)據(jù)和事件是直接綁定到Page上的，所以數(shù)據(jù)和事件命名應(yīng)該避免一下名字（之后會(huì)想辦法避免這種情況）及其相關(guān)解釋：

data中的名字：

• cropperData
• cropperMovableItems

函數(shù)名：

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

外部只用到showCropper和hideCropper

/**
    inputPath:輸入圖片地址
    callback(resPath):點(diǎn)擊“完成”按鈕后毀掉函數(shù)，毀掉函數(shù)中會(huì)有截圖地址
*/
showCropper(inputPath, callback)

使用

將welCropper復(fù)制到自己的工程當(dāng)中（以/pages/index/index為例）

wxml引入并調(diào)用：

<!-- 引入組件 -->
<import src="https://www.wxapp-union.com/welCropper/welCropper" />

<!-- 調(diào)用組件 -->
<template is="welCropper" data="{{data:cropperData, cropperMovableItems:cropperMovableItems}}"></template>

<!-- 用于選擇圖片，傳入cropper中 -->
<button bindtap='selectTap'>select image</button>

wxss引入：

@import "/welCropper/welCropper.wxss";

js引入和使用：

// 獲取顯示區(qū)域長(zhǎng)寬
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
        // 初始化組件數(shù)據(jù)和綁定事件
        cropper.init.apply(that, [W, H]);
    },
    selectTap() {
        var that = this

        wx.chooseImage({
            count: 1, // 默認(rèn)9
            sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
            sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
            success(res) {
                const tempFilePath = res.tempFilePaths[0]
                console.log(tempFilePath)

                // 將選取圖片傳入cropper，并顯示cropper
                that.showCropper({
                    src: tempFilePath,
                    sizeType: ['original', 'compressed'],   //'original' | 'compressed'(default)
                    callback: (resPath) => {
                        console.log("crop callback:" + resPath)
                        wx.previewImage({
                            current: '',
                            urls: [resPath]
                        })

                        // that.hideCropper() //隱藏，我在項(xiàng)目里是點(diǎn)擊完成就上傳，所以如果回調(diào)是上傳，那么隱藏掉就行了，不用previewImage
                    }
                })
            }
        })
    }