微信小程序对上传的图片进行裁剪-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序对上传的图片进行裁剪。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

背景：

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

实现思路

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

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

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

代码如下：文章来源地址https://www.toymoban.com/news/detail-440856.html

                // 1 打开相册获取图片路径
                uni.chooseImage({
                    count: 1, //默认选取1张图片
                    sourceType: ['album'], //从相册选择
                    success: function (res) {
                        // 2 对获取到的图片进行裁剪
                        wx.cropImage({
                          src: res.tempFilePaths[0], // 图片路径
                          cropScale: '1:1', // 裁剪比例
                          success:function(res){
                              // 3 将裁剪好的图片上传到服务器
                              uni.uploadFile({
                                  url: app.globalData.miniComent,//自己服务器的路径
                                  filePath: res.tempFilePath,//图片地址
                                  name: 'file',
                                  formData: {
                                      userCode:that.userCode
                                  },
                                  success: (res1) => {
                                      let url = JSON.parse(res1.data).data
                                      console.log(url,"裁剪成功后的图片网络地址");
                                      that.userInfo.headimgurl = url;//更新头像
                                  },
                                  complete: (res) => {
                                      console.log(res,"上传调用结束");
                                  }
                              });
                          },
                          complete: (res) => {
                              console.log(res,"裁剪调用结束");
                          }
                        })

到了这里，关于微信小程序对上传的图片进行裁剪的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！