实现图片自动压缩算法，canvas压缩图片方法

原创

于 2025-05-20 20:33:57 发布 · 873 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #canvas

背景：

在使用某些支持webgl的图形库（eg：PIXI.js，fabric.js）场景中，如果加载的纹理超过webgl可处理的最大纹理限制，会导致渲染的纹理缺失，甚至无法显示。

方案

实现图片自动压缩算法，自动获取 webgl 支持的最大纹理大小，设置一个压缩比率，循环压缩图片的像素，直到小于最大纹理限制。
返回 canvas，方便第三方库继续处理，如果需要 image，可自行调用canvas方法转换成image。

注意：如果不需要像素处理，删除处理像素相关的代码即可。

vim imageHelp.ts

/**
 *
 * @param imgStr image base64 | url
 * @param ratio 压缩比率
 * @returns 压缩后的canvas对象，获取image 使用 canvas.convertToBlob()
 */
export async function compressImage(options: {
   
    imgStr: string; ratio?: number; negate?: 0 | 1 }) {
   
   
  const {
   
    imgStr, ratio = 0.5, negate = 0 } = options
  const isInverted = negate == 1 // 底色是否反黑色
  // 2. 添加错误处理
  if (!imgStr) throw new Error('Invalid image source')
  if (ratio <= 0 || ratio > 1) throw new Error('Invalid compression ratio')

  try {
   
   
    const img = await loadImage(imgStr)
    const maxTextureSize = getMaxTextureSize()
    // 5. 优化尺寸计算逻辑
    const {
   
    width, height } = calculateTargetSize(img, ratio, maxTextureSize)

    // 6. 使用 OffscreenCanvas 提升性能
    const {
   
    canvas, ctx } = createCanvasContext(width, height)
    ctx.drawImage(img, 0, <