微信小程序压缩图片

由于wx.compressImage(Object object) iOS 仅支持压缩 JPG 格式图片。所以我们需要做一下特殊的处理:

1.获取文件,判断文件是否大于设定的大小

2.如果大于则使用canvas进行绘制,并生成新的图片路径

3.上传图片

javascript 复制代码
async chooseImage() {
    let res = await wx.chooseMedia({
      count: 1,
      sizeType: ["compressed"],
      mediaType: ['image']
    })
    if (res.tempFiles[0].size > 500 * 1024) { //大于500k
        //压缩图片
      compressImage(res.tempFiles[0], '#canvasId').then(result => {
        this.uploadFile(result.tempFilePath)
      })
    } else {
      this.uploadFile(res.tempFiles[0].tempFilePath)
    }
  },
javascript 复制代码
const compressImage = function (file, node) {
  return new Promise((resolve, reject) => {
    //获取图片的信息
    wx.getImageInfo({
      src: file.tempFilePath,
      success: async function (imageInfo) {
        //获取canvas
        const query = wx.createSelectorQuery()
        let canvasDom = query.select(node) //画布id
        canvasDom.fields({
            node: true,
            size: true
          })
          .exec((res) => {
            const canvas = res[0].node
            canvas.width = 900 
            canvas.height = 900
            const ctx = canvas.getContext('2d')
            let img = canvas.createImage();
            img.src = imageInfo.path; //要压缩的图片路径
            img.onload = () => {
              // 将图片绘制到canvas
              ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
              // 生成图片
              wx.canvasToTempFilePath({
                canvas,
                destWidth: 900, //压缩后宽
                destHeight: 900, //压缩后高
                fileType: 'jpg',
                quality: 0.8, //质量,可自定义
                success: (imgResult) => {
                  let fs = wx.getFileSystemManager()
                  fs.getFileInfo({
                    filePath: imgResult.tempFilePath,
                    success: (res) => {
                        //压缩后的图片如果还是大于500k,那么继续压缩直到小于500为止
                      if (res.size > 500 * 1024) {
                        compressImage(imgResult)
                      } else {
                        resolve(imgResult)
                      }
                    }
                  })
                },
                fail: (err) => {
                  console.error(err);
                  reject(err)
                }
              })
            }
          })
      },
      fail: function (err) {
        console.error('获取图片信息失败:', err);
      }
    });
  })
}
javascript 复制代码
uploadFile(avatarUrl) {
    if (avatarUrl) {
      wx.uploadFile({
        filePath: avatarUrl,
        name: 'file',
        url: "http://139.224.49.138:888/mini/myPage/uploadAvatar",
        formData: {
          openid: getApp().globalData.openid
        },
        success: (res) => {
          let {
            userInfo
          } = app.store.getState();
          userInfo.headPic = JSON.parse(res.data).url
          app.store.setState({
            userInfo: userInfo
          });
        },
        fail: err => {
          console.log(err);
        }
      })
    }
  },
html 复制代码
<canvas hidden="{
  
  {true}}" type="2d" id="canvasId"/>
相关推荐
游戏开发爱好者835 分钟前
Fiddler抓包实战教程 从安装配置到代理设置,详解Fiddler使用方法与调试技巧(HTTPHTTPS全面指南)
前端·测试工具·小程序·https·fiddler·uni-app·webview
sen_shan1 小时前
《微信小程序》第五章:登录-API封装
微信小程序·小程序
2501_916007475 小时前
Fastlane 结合 开心上架 命令行版本实现跨平台上传发布 iOS App
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张6 小时前
iOS 26 内存占用监控 多工具协同下的性能稳定性分析实战
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915909068 小时前
iOS 26 性能监控工具有哪些?多工具协同打造全方位性能分析体系
android·macos·ios·小程序·uni-app·cocoa·iphone
simon_93499 小时前
微信小程序(H5)上传文件到阿里云 OSS(使用 STS 临时凭证)
阿里云·微信小程序·小程序·html5
2501_9159184110 小时前
uni-app 上架 iOS 应用全流程 从云打包到开心上架(Appuploader)免 Mac 上传发布指南
android·macos·ios·小程序·uni-app·iphone·webview
老师可可11 小时前
成绩查询系统如何制作?
经验分享·学习·小程序·excel·学习方法
2501_9159214311 小时前
iOS 抓包工具有哪些,开发者的选型与实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9159184111 小时前
iOS 26 应用管理实战 多工具协同构建开发与调试的高效体系
macos·ios·小程序·uni-app·objective-c·cocoa·iphone