如何在JavaScript中将PNG blob转换为JPG blob？

场景1：浏览器端实现 #

通过canvas画布中转实现格式转换，步骤如下：

• 先将PNG资源（base64或Blob）加载为Image对象
• 图片加载完成后绘制到同等尺寸的canvas上
• 调用canvas的toBlob方法指定MIME类型为image/jpeg导出即可

代码示例：

// 替换为你的PNG base64数据
const pngBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgQAAAK2CAYAAAAxAIToAAAAAXNSR0IArs4c6QAAIABJREFUeF7s......';

const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
  // 初始化canvas尺寸和图片一致
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  // 绘制图片到canvas
  ctx.drawImage(img, 0, 0);
  // 导出JPG Blob，第三个参数为导出质量，取值0-1，数值越大画质越高、文件越大
  canvas.toBlob((jpgBlob) => {
    // 此处的jpgBlob就是转换完成的JPG格式Blob
    console.log(jpgBlob);
  }, 'image/jpeg', 0.9);
};
img.src = pngBase64;

// 如果原始是PNG Blob而非base64，用下面这行替换img.src的赋值即可
// img.src = URL.createObjectURL(pngBlob);

场景2：Node.js服务端实现 #

推荐用sharp图像处理库完成转换，性能更高：

const sharp = require('sharp');

// 处理base64格式的PNG资源
const pngBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgQAAAK2CAYAAAAxAIToAAAAAXNSR0IArs4c6QAAIABJREFUeF7s......';
// 提取base64编码部分转为Buffer
const pngBuffer = Buffer.from(pngBase64.split(',')[1], 'base64');

sharp(pngBuffer)
  // 指定JPG输出质量0-100
  .jpeg({ quality: 90 })
  .toBuffer()
  .then(jpgBuffer => {
    // Node.js 18及以上版本原生支持Blob构造函数，低版本可根据需求转base64使用
    const jpgBlob = new Blob([jpgBuffer], { type: 'image/jpeg' });
    console.log(jpgBlob);
  });

内容的提问来源于stack exchange，提问作者lewis machilika