两种方式：we-cropper 和 image-cropper
we-cropper在小程序android选择图片后跳转到裁剪页面图片不能显示，目前没找到解决方法，项目中换了image-cropper做。
image-cropper如果需要动态改变裁剪框大小的时候，初始化比较慢。其他暂时没发现问题。
个人觉得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, // 最大缩放倍数
zoom: 8, // 缩放系数
cut: { // 裁剪框x轴起点 裁剪框y轴期起点
x: 0,
y: (height - 300) / 2,
width: width, // 裁剪框宽度
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">
发布图片
</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">旋转</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({
/**
* 页面的初始数据
*/
data: {
fileType: '',//学历：E, 车：C, 房：H, 头像：H, 用户图片：U,兴趣爱好：I
isupdate: '',//是否更新照片
src: '',
width: 380,//宽度
height: 316,//高度
limit_move: true,//是否禁用旋转
max_width: 250,
max_height: 250,
disable_width: true,
disable_height: true
},
/**
* 生命周期函数--监听页面加载
*/
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() {
//在用户旋转的基础上旋转90°
this.cropper.setAngle(this.cropper.data.angle += 90);
},
end(e) {
clearInterval(this.data[e.currentTarget.dataset.type]);
},
})
网友评论