使用Canvas缩小图片（取宽高20%）却得到更大体积的问题

我来帮你拆解这个问题的核心原因，以及对应的修复方案：

核心原因分析 #

1. Canvas默认输出格式的压缩率问题 #

你使用的canvas.toDataURL()方法默认输出无压缩的PNG格式，而你的原始图片大概率是压缩率更高的格式（比如经过高效压缩的JPEG、或优化过的PNG）。举个实际例子：

• 一张1000×1000的高压缩JPEG可能只有30KB；
• 缩小到200×200后，用canvas默认输出无压缩PNG，体积可能达到50KB甚至更大——因为PNG对色彩丰富的图片压缩效率远不如JPEG，且原生canvas不支持PNG的压缩参数。

2. 不必要的Base64编码开销 #

你的代码里手动用window.btoa()将原始文件转成Base64格式的DataURL：

imageToAdjust = 'data:image/png;base64,' + window.btoa(e.target.result);

Base64编码本身会比原始二进制数据增加约33%的体积开销。如果原始图片已经是压缩后的格式，这一步会额外增大体积，再加上canvas输出的未压缩PNG，最终体积自然超过原图。

修复方案 #

1. 指定Canvas输出格式与压缩质量 #

调用toDataURL()时明确指定格式和压缩质量参数，优先选择高压缩率的格式（比如JPEG）：

function imageToDataUri(img, width, height) { 
  var canvas = document.createElement('canvas'), 
      ctx = canvas.getContext('2d'); 
  canvas.width = width; 
  canvas.height = height; 
  ctx.drawImage(img, 0, 0, width, height); 
  // 输出质量为0.7的JPEG，质量范围0-1（1为无损）
  return canvas.toDataURL('image/jpeg', 0.7); 
}

如果必须使用PNG格式，原生canvas无法直接设置压缩率，你可以借助第三方JS库（比如pngquant.js）对输出的DataURL进行二次压缩。

2. 优化图片源的加载方式 #

避免手动转Base64，改用URL.createObjectURL()加载原始文件，既高效又不会增加体积开销：

var img = new Image();
// 假设e.target是File对象（比如input[type=file]的change事件）
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function() {
  // 执行你的图片缩放逻辑
  var resizedDataUrl = imageToDataUri(img, img.width*0.2, img.height*0.2);
  // 用完后释放URL资源
  URL.revokeObjectURL(img.src);
}

3. 检查原始图片格式 #

如果原始图片本身是经过专业工具优化过的PNG（比如用TinyPNG压缩），canvas生成的未优化PNG即使尺寸更小，体积也可能更大。这种情况建议在canvas输出后，用PNG压缩库再处理一次。

内容的提问来源于stack exchange，提问作者Amer Bearat