当前位置:   article > 正文

微信小程序对上传的图片进行裁剪_wx.cropimage

wx.cropimage
  1. 背景:

使用uniapp中uni.chooseImage的裁剪参数crop只能在App中生效,在微信小程序中不生效。

  1. 实现思路

  1. uni.chooseImage打开相册获取图片路径(uni.chooseImage(OBJECT) | uni-app官网 (dcloud.net.cn)

  1. 将获取到的图片路径传入wx.cropImage对图片进行裁剪(wx.cropImage(Object object) | 微信开放文档 (qq.com)

  1. 将裁减后的图片路径通过uni.uploadFile上传到服务器生成网络地址(uni.uploadFile(OBJECT) | uni-app官网 (dcloud.net.cn)

  1. 代码如下:

  1.                 // 1 打开相册获取图片路径
  2.                 uni.chooseImage({
  3. count: 1, //默认选取1张图片
  4. sourceType: ['album'], //从相册选择
  5. success: function (res) {
  6.                         // 2 对获取到的图片进行裁剪
  7. wx.cropImage({
  8. src: res.tempFilePaths[0], // 图片路径
  9. cropScale: '1:1', // 裁剪比例
  10. success:function(res){
  11.                               // 3 将裁剪好的图片上传到服务器
  12. uni.uploadFile({
  13. url: app.globalData.miniComent,//自己服务器的路径
  14. filePath: res.tempFilePath,//图片地址
  15. name: 'file',
  16. formData: {
  17. userCode:that.userCode
  18. },
  19. success: (res1) => {
  20. let url = JSON.parse(res1.data).data
  21.   console.log(url,"裁剪成功后的图片网络地址");
  22. that.userInfo.headimgurl = url;//更新头像
  23. },
  24. complete: (res) => {
  25. console.log(res,"上传调用结束");
  26. }
  27. });
  28. },
  29. complete: (res) => {
  30. console.log(res,"裁剪调用结束");
  31. }
  32. })
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/565161
推荐阅读
相关标签
  

闽ICP备14008679号