兩種方式：we-cropper 和 image-cropper
we-cropper在小程序android選擇圖片后跳轉(zhuǎn)到裁剪頁面圖片不能顯示函似，目前沒找到解決方法撇寞，項目中換了image-cropper做。
image-cropper如果需要動態(tài)改變裁剪框大小的時候蔑担，初始化比較慢。其他暫時沒發(fā)現(xiàn)問題啤握。
個人覺得image-cropper更好用
we-cropper
參考文檔https://we-plugin.github.io/we-cropper/#/
在templates添加we-cropper文件排抬。
image.png
在page里面新建文件夾，按照文檔給出的方式寫就好了
mport WeCropper from '../../templates/we-cropper/we-cropper.js'
const myApp = getApp()
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50
Page({
data: {
cropperOpt: {
id: 'cropper', //用于收拾操作的canvas組件標識符
targetId: 'targetCropper', // 用于用于生成截圖的canvas組件標識符
pixelRatio: device.pixelRatio, // 傳入設備像素比
width,
height,
scale: 2.5, // 最大縮放倍數(shù)
zoom: 8, // 縮放系數(shù)
cut: { // 裁剪框x軸起點 裁剪框y軸期起點
x: 0,
y: (height - 300) / 2,
width: width, // 裁剪框?qū)挾? height: 300 // 裁剪框高度
},
boundStyle: {
color: 'rgba(0,0,0,0.8)',
lineWidth: 1
},
}
},
onLoad(option) {
console.log(option);
const widthHeightScale = option.width / option.height;
const {
cropperOpt
} = this.data;
const filePath = decodeURIComponent(option.filePath); //圖片臨時地址
cropperOpt.cut = {
x: (width - width * option.width / 750) / 2,
y: (height - width * option.height / 750) / 2,
width: width * option.width / 750,
height: width * option.height / 750,
};
this.setData({
cropperOpt
})
this.cropper = new WeCropper(cropperOpt)
.on('ready', (ctx) => {
console.log(`wecropper is ready for work!`)
})
.on('beforeImageLoad', (ctx) => {
wx.showToast({
title: '加載中',
icon: 'loading',
mask: true,
duration: 20000
})
})
.on('imageLoad', (ctx) => {
wx.hideToast()
})
// 獲取裁剪圖片資源后，給data添加src屬性及其值
this.cropper.pushOrign(filePath);
},
touchStart(e) {
this.cropper.touchStart(e)
},
touchMove(e) {
this.cropper.touchMove(e)
},
touchEnd(e) {
this.cropper.touchEnd(e)
},
getCropperImage() {
let _this = this;
this.cropper.getCropperImage()
.then((src) => {
console.log(src);
// wx.previewImage({
// current: '', // 當前顯示圖片的http鏈接
// urls: [src] // 需要預覽的圖片http鏈接列表
// });
wx.showLoading({
title: '上傳中...',
mask: true,
});
wx.uploadFile({
url: myApp.globalData.serverUrl + 'extEntryImageUpload.ext', //接口地址
filePath: src,
header: myApp.globalData.requestHeader,
name: 'imageFile',
success(res) {
},
fail(err) {
//console.log(err);
},
complete: function () {
wx.hideLoading();
}
})
})
.catch(() => {
console.log('獲取圖片地址失敗缘薛，請稍后重試')
})
},
})
<import src="../../templates/we-cropper/we-cropper.wxml"/>
<view class="cropper-wrapper">
<template is="we-cropper" data="{{...cropperOpt}}"/>
<view class="cropper-buttons flex flex-align-center flex-pack-center">
<view
class="getCropperImage btn btn_bg"
bindtap="getCropperImage">
發(fā)布圖片
</view>
</view>
image-cropper
參考https://github.com/wx-plugin/image-cropper
git上的代碼基本上直接可以拿來用了
同樣在templates里面
image.png
page下新建文件夾
json
"usingComponents": {
"image-cropper": "../../templates/image-cropper/imageCropper"
},
wxml
<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" limit_move="{{limit_move}}" disable_width="{{disable_width}}" disable_height="{{disable_height}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>
<view class='btn flex flex-align-center flex-pack-justify'>
<view class='subbtn left' catchtouchstart='rotate' catchtouchend='end' data-type="rotate">旋轉(zhuǎn)</view>
<view class='subbtn' bindtap='submit'>上傳</view>
</view>
js
const app = getApp()
import {
SERVERS_INFO, SERVERS_ALIAS, PATHS_ALIAS
} from '../../utils/api.js'
import utils from '../../utils/util.js';
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
fileType: '',//學歷：E, 車：C, 房：H, 頭像：H, 用戶圖片：U,興趣愛好：I
isupdate: '',//是否更新照片
src: '',
width: 380,//寬度
height: 316,//高度
limit_move: true,//是否禁用旋轉(zhuǎn)
max_width: 250,
max_height: 250,
disable_width: true,
disable_height: true
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (option) {
//獲取到image-cropper對象
this.cropper = this.selectComponent("#image-cropper");
const filePath = decodeURIComponent(option.filePath); //圖片臨時地址
console.log(width * option.width / 750)
console.log(width)
//開始裁剪
this.setData({
src: filePath,
width: width * option.width / 750,
height: width * option.height / 750,
max_width: width * option.width / 750,
max_height: width * option.height / 750,
fileType: option.fileType,
isupdate: option.isupdate
});
wx.showLoading({
title: '加載中'
})
},
cropperload(e) {
console.log("cropper初始化完成");
},
loadimage(e) {
console.log("圖片加載完成", e.detail);
wx.hideLoading();
//重置圖片角度表锻、縮放、位置
this.cropper.imgReset();
},
clickcut(e) {
console.log(e.detail);
//點擊裁剪框閱覽圖片
wx.previewImage({
current: e.detail.url, // 當前顯示圖片的http鏈接
urls: [e.detail.url] // 需要預覽的圖片http鏈接列表
})
},
submit: function () {
this.cropper.getImg((obj) => {
// app.globalData.imgSrc = obj.url;
// wx.navigateBack({
// delta: -1
// })
const src = obj.url;
const _this = this;
wx.showLoading({
title: '上傳中...',
mask: true,
});
wx.uploadFile({
url:''
})
});
},
rotate() {
//在用戶旋轉(zhuǎn)的基礎上旋轉(zhuǎn)90°
this.cropper.setAngle(this.cropper.data.angle += 90);
},
end(e) {
clearInterval(this.data[e.currentTarget.dataset.type]);
},
})
