微信小程序截圖工具
發布時間：2018-04-25 09:15 所屬欄目：小程序開發教程
welCropper 微信小程序截圖工具
./ ├── 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
因為cropper的數據和事件是直接綁定到Page上的，所以數據和事件命名應該避免一下名字（之后會想辦法避免這種情況）及其相關解釋： data中的名字：
函數名：
外部只用到showCropper和hideCropper
/**
inputPath:輸入圖片地址
callback(resPath):點擊“完成”按鈕后毀掉函數，毀掉函數中會有截圖地址
*/
showCropper(inputPath, callback)使用
將welCropper復制到自己的工程當中（以/pages/index/index為例）wxml引入并調用：
<!-- 引入組件 -->
<import src="/welCropper/welCropper" />
<!-- 調用組件 -->
<template is="welCropper" data="{{data:cropperData, cropperMovableItems:cropperMovableItems}}"></template>
<!-- 用于選擇圖片，傳入cropper中 -->
<button bindtap='selectTap'>select image</button>
wxss引入：
@import "/welCropper/welCropper.wxss";
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
that.showCropper({
src: tempFilePath,
sizeType: ['original', 'compressed'], //'original' | 'compressed'(default)
callback: (resPath) => {
console.log("crop callback:" + resPath)
wx.previewImage({
current: '',
urls: [resPath]
})
// that.hideCropper() //隱藏，我在項目里是點擊完成就上傳，所以如果回調是上傳，那么隱藏掉就行了，不用previewImage
}
})
}
})
}
|
