评论

mp-image-compress小程序图片压缩接口(图片压缩至指定大小),并返回width, height, size

mp-image-compress小程序图片压缩接口(图片压缩至指定大小),并返回width, height, size

mp-image-compress 小程序图片压缩接口(图片压缩至指定大小),并返回 width, height, size

为规范前端用户上传照片的大小,减轻存储服务器压力,当用户选取的照片过大时,在前端自动进行压缩至指定大小(比如 1M )后再上传。

1 - 仓库地址

2 - 测试环境

  • 微信小程序基础库版本:2.32.3 及以上

3 - 安装方法:npm安装

npm i mp-image-compress --save

依赖包安装后,需要在小程序开发者工具中:构建npm

4 - 接口使用示例

index.js

// 引用 mp-image-compress
import mpImageCompress from 'mp-image-compress'

Page({
  data: {
    img: ''
  },
  onLoad() {
    mpImageCompress.clearTempImg() // 页面载入时清除临时文件
  },
  onUnload() {
    mpImageCompress.clearTempImg()  // 页面卸载时清除临时文件
  },
  chooseImage() {
    const that = this
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      sizeType: ['original', 'compressed'],
      async success(res) {
        const info = res.tempFiles[0]

        // 选择文件后调用图片压缩接口进行压缩。如果选取的图片没有达到指定的大小,将返回原图

        const imgRes = await mpImageCompress.set(info.tempFilePath, 1024) // 1024K
        console.info(imgRes)

        ///////////////////////

        that.setData({
          img: imgRes.filePath
        })
      }
    })
  },
  preview() {
    wx.previewImage({
      current: this.data.img,
      urls: [this.data.img]
    })
  },
  DelImg() {
    this.setData({
      img: ''
    })
  },
})
最后一次编辑于  2023-11-16  
点赞 3
收藏
评论

7 个评论

  • Tai
    Tai
    06-07

    同时压缩多个图片的时候,返回的图片是同一张

    06-07
    赞同 1
    回复
  • òᆺó
    òᆺó
    03-15

    大佬,压缩后返回来的是一个文件流还是和文件临时路径啊?

    03-15
    赞同 1
    回复 1
    • 收割机
      收割机
      03-17
      路径
      03-17
      回复
  • 贝波#宝贝走天下
    贝波#宝贝走天下
    02-07

    为什么返回压缩后的大小不是指定的大小?

    02-07
    赞同 1
    回复 1
    • .
      .
      08-28
      会比那个小一点点 但是不影响使用的,差距不会太大
      08-28
      回复
  • Mr.ice
    Mr.ice
    12-10

    报错:TypeError: Cannot read property 'clearRect' of undefined

    12-10
    赞同
    回复
  • momo
    momo
    11-20

    可以自定义压缩质量不?


    11-20
    赞同
    回复
  • 阿兔~是个女汉子
    阿兔~是个女汉子
    05-03

    各位大佬,我这个提示怎么调?错误:未定义模块“pages/image-compress.js”,要求参数为“mp-image-compress”

    05-03
    赞同
    回复
  • 不吃芹菜
    不吃芹菜
    2023-11-18

    复制了代码用不了

    2023-11-18
    赞同
    回复 4
    • 收割机
      收割机
      2023-11-19
      需要安装mp-image-compress
      2023-11-19
      回复
    • JSCHEN2005
      JSCHEN2005
      01-22
      您好,你这个目前只支持单个图片压缩,是否支持多个临时文件压缩?
      01-22
      回复
    • 阿兔~是个女汉子
      阿兔~是个女汉子
      05-03回复收割机
      大佬,mp-image-compress怎么安装
      05-03
      回复
    • .
      .
      08-28回复阿兔~是个女汉子
      readme 里面有,需要使用npm
      08-28
      回复
登录 后发表内容