JavaScript 使用 Canvas 进行图片压缩与 Base64 转换

图片压缩背景与实现概述

在近期的 APP 项目开发中，涉及到了手机拍照后上传图片的功能。由于手机拍摄的照片文件体积通常较大，直接上传会导致传输速度缓慢。为了优化上传体验，必须对图片进行压缩处理。以下是具体的实现方案：

/* 
 * 图片压缩
 * img    原始图片
 * width   压缩后的宽度
 * height  压缩后的高度
 * ratio   压缩比率 
 */
 function compress(img, width, height, ratio) {        
   var canvas, ctx, img64;
        
   canvas = document.createElement('canvas');        
   canvas.width = width;
   canvas.height = height;
        
   ctx = canvas.getContext("2d");        
   ctx.drawImage(img, 0, 0, width, height);
        
   img64 = canvas.toDataURL("image/jpeg", ratio);
        
   return img64;
 }

参数说明与格式建议

上述代码定义了一个图片压缩函数，该函数返回 base64 格式的图片数据。其中，压缩比率参数取值范围为 0 到 1 之间，数值越大代表图片质量越高。建议避免将图片转换为 png 格式，因为转换为 png 后的 base64 字符串长度通常远大于 jpeg 格式。以下是实际的调用示例：

var image = new Image();
image.src = "/img/test.jpg";
      
image.onload = function(){
  var img64 = compress(image, 500, 400, 0.7);
  document.getElementById("test").src = img64;
}

执行时机注意事项

需要注意的关键点是：压缩方法的调用以及图片 src 属性的赋值操作，必须放置在图片的 onload 事件处理函数内部。这是因为只有当图片完全加载完成后，才能进行有效的压缩处理并转换为 base64 数据进行赋值。如果将这些操作放在 onload 事件之外执行，压缩代码可能会失效，或者最终生成的是一张纯黑色的图片。

以上介绍了利用 JavaScript 和 Canvas 实现图片压缩的完整过程，供读者参考。