⾸先从相册或者拍照选择图⽚
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: pFilePaths[0],
// })
var tempFilePaths = pFilePaths;
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' ></canvas>
<view class="upload" bindtap="uploadTap">重新选择</view>
<view class="getCropperImage" bindtap="getCropperImage">确定</view>
</view>
</view>
js代码
// pages/avatarCut/avatarCut.js
const app =getApp()
//引⼊的组件
import WeCropper from '../../components/we-cropper/we-cropper.js'
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight -150
const token = wx.getStorageSync('token')
Page({
data:{
cropperOpt:{
id:'cropper',
width,
height,
scale:2.5,
zoom:8,
cut:{
x:(width -200)/2,
y:(height -200)/2,
width:200,
height:200
}
},
avatar:"",
canvasImgUrl:'',
电脑不显示u盘imageSize:''
},
touchStart(e){
uchStart(e)
},
touchMove(e){
uchMove(e)
},
touchEnd(e){
uchEnd(e)
},
/
/这个是保存上传裁剪后的图⽚的⽅法
getCropperImage(){
var that =this
CropperImage((avatar)=>{
if(avatar){
// that.uploadImage(avatar, (res) => { })
}else{
console.log('获取图⽚失败，请稍后重试')
}
})
},
//重新选择头像
uploadTap(){
const self =this
wx.chooseImage({
count:1,// 默认9
sizeType:['original','compressed'],// 可以指定是原图还是压缩图，默认⼆者都有 sourceType:['album','camera'],// 可以指定来源是相册还是相机，默认⼆者都有 success: function (res){
const src = pFilePaths[0]
// 获取裁剪图⽚资源后，给data添加src属性及其值
self.wecropper.pushOrign(src)
}
})
东方神起成员名字},
//压缩并获取图⽚，这⾥⽤了递归的⽅法来解决canvas的draw⽅法延时的问题
getCanvasImg: function (index, failNum, tempFilePaths){
var that =this;
console.log(111)
src: tempFilePaths,//图⽚的路径，可以是相对路径，临时⽂件路径，存储⽂件路径，⽹络图⽚路径, success: res =>{
console.log(res)
const ctx = wx.createCanvasContext('attendCanvasId');
setTimeout(()=>{
ctx.drawImage(tempFilePaths,0,0,100,100);
ctx.draw(true, function (){
wx.canvasToTempFilePath({
canvasId:'attendCanvasId',
success: function success(res){
console.log(res)
that.pFilePath,(res)=>{});
}, fail: function (e){
failNum +=1;//失败数量，可以⽤来提⽰⽤户
}
});
});
},1000);
},
fail:()=>{},
complete:()=>{}
});
},
onLoad(option){
let that =this;
const{ cropperOpt }=this.data;
var tempFilePaths = option.src;
// that.setData({
// // tempFilePath可以作为img标签的src属性显⽰图⽚
// avatar: option.src,
// })
if(option.src){
cropperOpt.src = option.src
new WeCropper(cropperOpt)
.on('ready',(ctx)=>{
})
.on('beforeImageLoad',(ctx)=>{
/
/ wx.showToast({
// title: '上传中',
// icon: 'loading',
// duration: 2000
// })
})
.on('imageLoad',(ctx)=>{
// wx.hideToast()
})
.on('beforeDraw',(ctx, instance)=>{
})
.
updateCanvas()
}
},
uploadImage (filePath, cb){//个⼈封装的简单的上传单张图⽚上传的⽅法
wx.uploadFile({
url: app.baseURL +'/User/uploadSinglePicture',
filePath: filePath,
name:'file',
header:{
"Content-Type":"multipart/form-data"
},
rain服兵役
formData:{
token: ken,
file: filePath,
type:1
},
success:(res)=>{
console.log(res)
let data = JSON.parse(res.data);//由于拿到的数据未解析，这⾥先解析json de ==1){
console.log(222)
cb(res);
url: app.baseURL +'/user/profile',
data:{
token: wx.getStorageSync('token'),
avatar: data.data,
type:1
},
success(res){
console.log(res)
if(de ==1){
wx.showToast({
title: res.data.msg,
})
}
//跳转到"我的"页⾯
wx.switchTab({
url:"/pages/my/index",//这个地⽅看个⼈需求了
});
}
})
}
},
fail:(res)=>{
wx.showToast({
title:'上传失败',
})
},
})
}
})
好啦，上传并裁剪头像的功能就实现啦，亲测有效喔~
下⾯就是组件免费下载地址~ (复制粘贴⽹址直接点击下载就可)
发布评论