一、背景与痛点

在移动端 H5 或小程序开发中，图片上传几乎是每个项目都会遇到的需求。因为手机摄像头像素继续提高，使用者随手拍摄的一张照片可能会高达10 MB+。直接上传原图会导致：

1. 上传慢大文件在弱网环境下耗时极长，使用者体验差。
2. 流量浪费对使用者和服务器都是不必要的流量消耗。不过，
3. 存储成本高服务端存储大量原图成本昂贵。

更棘手的是Android 与 iOS 在处理图片压缩时存在显著差异——一样的压缩任务。在 iPhone 上可能正常，而在安卓低端机上则可能出现内存溢出、色彩异常甚至直接崩溃。这些问题如果不加处理，线上反馈会非常糟糕。

二、大图片压缩的关键技术选型

为什么选择 Canvas？

前端图片压缩主流方案有两种：

Coding demo：基于 Canvas 的自研压缩函数

function compressImage {
return new Promise => {
const reader = new FileReader;说起来，reader.readAsDataURL;reader.onload = e => {
const img = new Image;img.onload = => {
const canvas = document.createElement;const { width,height } = calculateSize;说起来，canvas.width = width;说起来，canvas.height = height;const ctx = canvas.getContext;// 清除画布并填充白色背景
ctx.clearRect;ctx.fillStyle = '#FFFFFF';ctx.fillRect;ctx.drawImage,height * );canvas.toBlob,format || 'image/jpeg'。quality || undefined);}，img.onerror = reject;
img.src = e.target.result;}，reader.onerror = reject;})，}

主要参数说明

• 尺寸: 通过 drawImage 缩放保持宽高比；你可以先裁剪再压缩，以减小内存使用。
• 质量（quality): toBlob/toDataURL 传入 范围值，决定 JPEG/WEBP 压缩率；数值越低文件越小但失真更明显。
• 格式（format):  - JPEG 在 Android 上最稳定；说起来，PNG 保留透明通道，但在某些 ROM 上色彩偏移；WebP 可进一步减小体积，但兼容性需检查。说起来，

三、Android 专项兼容与矫正策略

说到问题一。大图解码导致 OOM

现象：A4000×3000 大图在低端机上直接通过 new Image 加载会崩溃或卡顿。原因：A 高像素图解码后占用 ~12‑15 MB 堆内存。Android 堆大小往往只有 ~30‑40 MB，导致 OOM。矫正方案：

• KISS 方法：  支持按需解码并可指定最大尺寸。说到示例代码如下，

async function loadImageWithLimit{
return await createImageBitmap(fileObj。{
resizeWidth:maxWidth,resizeHeight:maxHeight,resizeQuality:'medium'
});}

*createImageBitmap 在老旧 Android 浏览器不支持，需要降级为分步加载 +  异步解码策略。如下所示：

function loadSafe{
return new Promise=>{
const fr=new FileReader;fr.onload=e=>{
const img=new Image;img.onload=res.bind;老实说，img.onerror=rej;img.src=e.target.result;if{img.decode.catch=>{})}
};fr.readAsDataURL;})，}

问题二这方面。颜色异常与 EXIF Orientation 未处理 **现象**的观点是，部分华为、小米机型压缩后出现明显绿色或紫偏。**原因**的观点是，Android ROM 对 Canvas 编码时错误地使用了非 sRGB 色彩空间。而且相机拍摄的照片常带有 EXIF Orientation 信息，如果不校正会导致旋转或色彩失真。不过，**矫正方案**：

• *统一使用 JPEG 格式* – PNG 在 Android 上容易产生色彩偏差；JPEG 编码更稳定，
• *清除画布并填充白色背景* – 避免透明通道残留导致颜色异常。
• *读取并校正 EXIF Orientation* – 推荐使用  或  库自动旋转后再绘制至 Canvas。 function correctOrientation{ EXIF.getData{ const orientation=EXIF.getTag;// })，说起来，} `​`