微信小程序压缩图片

由于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"/>
相关推荐
weixin_177297220691 小时前
剧本杀小程序系统开发:构建线上线下融合的剧本杀生态圈
小程序·剧本杀
2501_915918416 小时前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone
小蒜学长8 小时前
基于springboot 校园餐厅预约点餐微信小程序的设计与实现(代码+数据库+LW)
数据库·spring boot·微信小程序
cookqq8 小时前
Cursor和Hbuilder用5分钟开发微信小程序
微信小程序·小程序·curosor
老华带你飞9 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
毕设源码-钟学长10 小时前
【开题答辩全过程】以 基于微信小程序的美发服务系统的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
canglingyue11 小时前
微信小程序罗盘功能开发指南
微信小程序·小程序
三脚猫的喵14 小时前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
2501_9151063215 小时前
App Store 软件上架全流程详解,iOS 应用发布步骤、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview