更新记录

1.0.0（2026-10-11） 下载此版本

• 首次发布。
• 新增 compressImage 图片压缩接口，支持质量压缩与等比尺寸缩放。
• 支持微信/支付宝/百度/抖音/QQ/快手等小程序、H5、App(vue)。
• 小程序基于 Canvas 2D，H5/App 基于 HTML5 Canvas。
• 提供 easycom 组件 <hy-image-compress-js>，跨端统一调用。
• 参数与错误码与 UTS 版 hy-image-compress 保持一致。

平台兼容性

uni-app(5.05)

hy-image-compress-js 图片压缩（JS 版）

纯 JS 跨端图片压缩插件，基于 Canvas 实现质量压缩与尺寸缩放，一套用法适配 小程序 / H5 / App(vue) 等常用平台。

与原生 UTS 插件 hy-image-compress（Android / iOS / Web / Harmony）保持一致的参数与返回结构，错误码也完全一致，便于两端无缝切换。

平台支持

目录结构

uni_modules/hy-image-compress-js/
├── components/
│   └── hy-image-compress-js/
│       └── hy-image-compress-js.vue   # 跨端组件（小程序端内置隐藏 canvas）
├── js_sdk/
│   └── hy-image-compress/
│       ├── index.js                # 统一入口 compressImage
│       ├── html-canvas.js          # H5 / App 实现
│       ├── mp-canvas.js            # 小程序实现
│       └── utils.js                # 公共工具
├── package.json
├── readme.md
└── changelog.md

使用方式

方式一：组件（推荐，全平台统一）

组件已内置 easycom，无需手动 import，直接使用标签 <hy-image-compress-js>。

<template>
  <view>
    <hy-image-compress-js ref="compressor" />
    <button @click="doCompress">压缩图片</button>
  </view>
</template>

<script>
export default {
  methods: {
    doCompress() {
      uni.chooseImage({
        count: 1,
        success: (chooseRes) => {
          const src = chooseRes.tempFilePaths[0]
          this.$refs.compressor.compress({
            src: src,
            quality: 80,
            maxWidth: 1280,
            maxHeight: 1280,
            format: 'jpg',
            success: (res) => {
              console.log('压缩成功', res.tempFilePath, res.size)
            },
            fail: (err) => {
              console.error('压缩失败', err.errCode, err.errMsg)
            }
          })
        }
      })
    }
  }
}
</script>

方式二：函数（仅 H5 / App）

H5 / App 端无需 canvas 组件，可直接引入函数调用。

import { compressImage } from '@/uni_modules/hy-image-compress-js/js_sdk/hy-image-compress/index.js'

compressImage({
  src: tempFilePath,
  quality: 80,
  maxWidth: 1280,
  success(res) {},
  fail(err) {},
  complete(res) {}
})

小程序端调用函数必须传入 componentInstance（组件内）或 canvasNode，否则无法定位 canvas。因此小程序端请优先使用方式一组件。

API

compressImage(options) / this.$refs.compressor.compress(options)

成功回调 res

错误码

缩放规则

• 等比缩放，只缩小不放大；
• 同时设置 maxWidth、maxHeight 时，取能满足两个限制的最小比例；
• 宽高均在限制值以内时保持原尺寸，仅做质量压缩。

注意事项

• quality 仅对 jpg 生效，png 为无损压缩，忽略该参数。
• 小程序端使用 Canvas 2D 接口，要求小程序基础库版本支持 type="2d"（微信基础库 2.9.0+）。
• 小程序端压缩网络图片需配置 downloadFile 合法域名。
• H5 端压缩跨域图片时，服务器需返回 CORS 头，否则 canvas 会被污染导致导出失败。
• H5 / App 端返回的 tempFilePath 为 blob: 开头的 objectURL，如需上传请使用对应 blob 或及时转存。
• nvue 页面不支持，请使用 vue 页面。

更新日志

见 changelog.md