E企盈营销工具技术服务商 热线:4006-838-530

处理微信小程序上传头像裁剪功能。

E企盈直播平台营销卖货系统

这里使用的是开源是的插件,做的很不错 https://github.com/we-plugin/we-cropper.gitgit下来之后,如果急着使用效果。可以直接到example目录下 把we-cropper文件夹直接放在自己的小程序项目中,现在我使用的是照片裁剪上传的功能。所以需要两个页面来共同完成。A页面 展示修改裁剪后照片的页面 ,B 页面的原来实现裁剪功能的页面。A页面的代码 :通过事件出发获取相册的api后,拿到图片地址,携带地址跳转到B页面wx.chooseImage({    count: 1,//选择数量    sizeType: [‘original’, ‘compressed’], // 可以指定是原图还是压缩图,默认二者都有    sourceType: [‘album’, ‘camera’], // 可以指定来源是相册还是相机,默认二者都有    success: function(res) {    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片            const src = res.tempFilePaths[0]            wx.redirectTo({               url: `../B/B?src=${src}`,            })    },})——————————————————————————————————————B 页面的wxml :import src=”../../we-cropper/we-cropper.wxml”/view class=”cropper-wrapper”template is=”we-cropper” data=”{{…cropperOpt}}”/view class=”cropper-buttons”viewclass=”upload”bindtap=”uploadTap”重新选择/viewviewclass=”getCropperImage”bindtap=”getCropperImage”确定/view/view/view————————————————————————————————B页面的css:@import “../../style/common.wxss”;page{height: 100%}.cropper{position: absolute;top: 0;left: 0;}.cropper-buttons{    “rgba(0, 0, 0, 0.95);    color: #04b00f;}————————————————————————————————————B页面的js   关键的页面 import WeCropper from ‘../../we-cropper/we-cropper.js’const device = wx.getSystemInfoSync()const width = device.windowWidthconst height = device.windowHeight – 50Page({  data: {    cropperOpt: {      id: ‘cropper’,      width,      height,      scale: 2.5,      zoom: 8,      cut: {        x: (width – 300) / 2,        y: (height – 300) / 2,        width: 300,        height: 300      }    }  },  touchStart(e) {    this.wecropper.touchStart(e)  },  touchMove(e) {    this.wecropper.touchMove(e)  },  touchEnd(e) {    this.wecropper.touchEnd(e)  },//这个是保存上传裁剪后的图片的方法  getCropperImage() {    var that = this    this.wecropper.getCropperImage((avatar) = {      if (avatar) {        uploadImage(avatar, function (res) { })        function uploadImage(filePath, cb) {   //个人封装的简单的上传单张图片上传的方法          wx.uploadFile({            url: “xxx/xx/xx”,            filePath: filePath,            name: ‘file’,            header: {              “Content-Type”: “multipart/form-data”            },            formData: {              token: getApp().globalData.userData.token,              userName: “”,              portrait: filePath            },            success: function (res) {              //  获取到裁剪后的图片              wx.switchTab({                url: `../A/A?avatar=${avatar}`   如果需要这图片地址就传过去 ,因为我上传后跳转页面后会自己获取服务器的是地址了。这里仅提供思路参考。              })              console.log(‘上传图片成功’)              console.log(res);              wx.showToast({                title: ‘上传成功’,              })              cb(res);            },            fail: function (res) {              console.log(‘上传图片失败!’)              console.log(res)              wx.showToast({                title: ‘上传失败’,              })            },          })        }       } else {        console.log(‘获取图片失败,请稍后重试’)      }    })  },  uploadTap() {    const self = this    wx.chooseImage({      count: 1, // 默认9      sizeType: [‘original’, ‘compressed’], // 可以指定是原图还是压缩图,默认二者都有      sourceType: [‘album’, ‘camera’], // 可以指定来源是相册还是相机,默认二者都有      success(res) {        const src = res.tempFilePaths[0]        //  获取裁剪图片资源后,给data添加src属性及其值        self.wecropper.pushOrign(src)      }    })  },  onLoad(option) {    const { cropperOpt } = this.data    if (option.src) {      cropperOpt.src = option.src      new WeCropper(cropperOpt)        .on(‘ready’, (ctx) = {          console.log(`wecropper is ready for work!`)        })        .on(‘beforeImageLoad’, (ctx) = {          console.log(`before picture loaded, i can do something`)          console.log(`current canvas context:`, ctx)          wx.showToast({            title: ‘上传中’,            icon: ‘loading’,            duration: 20000          })        })        .on(‘imageLoad’, (ctx) = {          console.log(`picture loaded`)          console.log(`current canvas context:`, ctx)          wx.hideToast()        })        .on(‘beforeDraw’, (ctx, instance) = {          console.log(`before canvas draw,i can do something`)          console.log(`current canvas context:`, ctx)        })        .updateCanvas()    }  }})——————————————————————————————————————————这里只是写了的上传头像裁剪的功能,其他的还有常规的的,裁剪网络图,图片添加水印,局部裁剪的功能。有兴趣可以在example目录夹下有对应的源码

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 处理微信小程序上传头像裁剪功能。
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏