直接用 canvas 合并图片会丢失 exif 信息和颜色配置，因为浏览器加载 标签时默认解码为无元数据的 rgb 位图，icc 配置、orientation 标记、gps 数据等全部被丢弃；即使 drawimage 绘制后调用 todataurl 或 toblob，输出仍是无元数据的“裸图”，这是规范行为而非 bug。
为什么直接用 canvas 合并图片会丢失 EXIF 信息和颜色配置？
浏览器加载 <img> 标签时默认解码为 RGB 位图，原始图片的 ICC 配置文件、方向标记（Orientation）、GPS 元数据等全部被丢弃。即使你用 drawImage 把多张图画到 canvas 上，导出的 toDataURL('image/jpeg') 或 toBlob() 结果仍是无元数据的“裸图”。这不是 bug，是规范行为。
- 真实需求如微信长图文、电商详情页拼接，常要求保留原图色彩准确性和竖图自动旋转——必须在前端读取并手动还原 Orientation
-
EXIF.js可解析二进制 ArrayBuffer 中的 EXIF，但需用FileReader+ArrayBuffer加载原始文件，不能走<img src="data:...">这条捷径 - Chrome 117+ 支持
createImageBitmap(file, {premultiplyAlpha: 'none', colorSpaceConversion: 'none'})，但无法绕过 canvas 渲染阶段的颜色空间转换，实测仍会偏色
如何让多张本地图片按顺序垂直拼接且保持原始宽高比？
关键不是“拉伸填满”，而是“逐张计算高度，留白对齐”。用户上传的图可能宽高差异极大（比如一张 300×2000 的截图 + 一张 1200×800 的产品图），强行统一宽度会严重变形。
- 设定一个基准宽度（如
baseWidth = 750），每张图按比例缩放：scale = baseWidth / originalWidth，再算出目标高度targetHeight = Math.round(originalHeight * scale) - 所有图片统一左对齐，顶部间距设为固定值（如
gap = 20），第一张从 y=0 开始，第二张从 y=targetHeight1 + gap开始，以此类推 - 最终 canvas 宽度 =
baseWidth，高度 = 所有targetHeight之和 +gap * (n - 1) - 注意：缩放后若某张图宽度略小于
baseWidth（因四舍五入），可用ctx.drawImage(img, 0, y, width, height, 0, y, baseWidth, height)拉伸补满，但仅限于 UI 层视觉对齐，不改变图像内容
canvas.toBlob() 在 iOS Safari 下生成的 PNG 为什么是黑底？
iOS Safari 对 canvas 的 alpha 通道处理异常严格。当 canvas 初始化时未指定 alpha: true，或绘制过程中某张图带透明区域（如 PNG 边框、阴影），而目标格式又选了 PNG，就极易出现黑色背景替代透明色。
- 创建 canvas 时显式传参：
document.createElement('canvas').getContext('2d', { alpha: true }) - 每次开始绘制前清空 canvas：
ctx.clearRect(0, 0, canvas.width, canvas.height)，别依赖默认背景 - 如果确定不需要透明，导出时强制转 JPEG：
canvas.toBlob(callback, 'image/jpeg', 0.92)，JPEG 不支持 alpha，自然避开问题 - 测试发现：iOS 16.4+ 对
toBlob的 MIME 类型校验变严，写成'image/jpg'会静默失败，必须用标准的'image/jpeg'
用户拖拽多图上传后，怎样避免内存爆掉或卡死？
一次上传 20 张 5MB 的图，原始 ArrayBuffer 就占 100MB，再加上 canvas 像素缓冲（RGBA × 宽 × 高），很容易触发浏览器内存警告甚至崩溃，尤其在低端 Android 设备上。
- 限制单次上传数量：
input[type="file"]加multiple但 JS 层检查files.length ，超限提示“建议分批处理” - 逐张处理：用
for...of+await控制流，每张图完成 decode → 缩放 → 绘制 → 释放 img 对象（img.src = ''）后再进行下一张 - 大图降采样：对宽度 > 2000 的图，先用
createImageBitmap的resizeWidth/resizeHeight选项压缩到 1500px 再绘制，精度损失可接受，内存直降 60% - 不用
URL.createObjectURL()长期持有 blob 引用，绘制完立刻URL.revokeObjectURL()
拼接逻辑本身不复杂，难的是在各种设备和图片组合下保持稳定输出。最常被忽略的是：没做 Orientation 还原导致竖图横着贴，以及没控制并发导致低端机直接无响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
