本文介绍如何利用 HTML5 Canvas 在 JavaScript 中实现图片压缩，以解决移动端拍照图片过大导致的上传缓慢问题。通过调整压缩比率和尺寸，可将图片转换为 Base64 格式。重点强调必须在图片 onload 事件完成加载后执行压缩，否则可能导致处理失败或生成黑图。
图片压缩背景与实现概述
在近期的 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 实现图片压缩的完整过程，供读者参考。