首先从相册或者拍照选择图片
js代码:
//点击上传头像方法
showAction() {
let that = this
wx.showActionSheet({
itemList: ['从相册中选择', '拍照'],
success: function(res) {
if (!res.cancel) {
console.log(res.tapIndex)
if (res.tapIndex == 0) {
that.chooseWxImage('album')
} else if (res.tapIndex == 1) {
that.chooseWxImage('camera')
}
}
}
})
},
chooseWxImage: function(type) {
var that = this;
wx.chooseImage({
count:1,
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function(res) {
console.log(res);
// that.setData({
// // tempFile ath可以作为img标签的src属性显示图片
// avatar: res.tempFilePaths[0],
// })
var tempFilePaths = res.tempFilePaths;
wx.navigateTo({
url: "/pages/avatarCut/index?src=" + tempFilePaths
});
}
})
},
然后新建一个页面,放置画布等,对裁剪图片进行操作
这个地方需要引入一个组件,当如小程序文件中的components文件夹里就可以,文章尾部会有放置下载地址
html代码:
//引入的组件
<import src="../../components/we-cropper/we-cropper.wxml"/>
<view class="cropper-wrapper">
<template is="we-cropper" data="{
{...cropperOpt}}"/>
<view class="cropper-buttons">
<canvas canvas-id='attendCanvasId' class='myCanvas' style