html5图片压缩与canvas映射的核心是像素坐标、缩放比例和devicepixelratio协同作用；需统一canvas属性尺寸与css显示尺寸比例，动态适配dpr，确保drawimage目标尺寸为整数且同比例缩放，并优先用降采样而非仅调quality压缩。
HTML5 中图片压缩与 Canvas 绘图空间的映射，核心在于理解像素坐标、缩放比例和设备像素比（devicePixelRatio）三者如何共同影响图像渲染质量与体积。直接用 canvas.toDataURL() 压缩图片时，若忽略空间映射关系，容易导致模糊、拉伸或压缩失真。
Canvas 画布物理尺寸与 CSS 显示尺寸的分离
Canvas 元素有两个尺寸：一个是 DOM 属性 width/height（即绘图上下文的逻辑像素数），另一个是 CSS 的 style.width/style.height（控制显示大小）。两者不一致时，浏览器会自动缩放渲染结果——这正是图像失真的常见源头。
- 若设置
<canvas width="800" height="600"></canvas>，但 CSS 写成width: 400px; height: 300px;，浏览器将把 800×600 像素内容等比缩放到 400×300 显示区域，造成插值模糊 - 正确做法是让 CSS 尺寸与 canvas 属性尺寸保持比例一致；如需响应式，应动态重设
canvas.width/canvas.height，而非仅靠 CSS 缩放 - 高 DPI 设备（如 Retina 屏）需额外考虑
window.devicePixelRatio：实际绘制分辨率 = CSS 尺寸 × dpr
图片加载后到 Canvas 的像素对齐策略
用 ctx.drawImage(img, ...) 把图片绘制到 canvas 时，源图尺寸、目标区域、canvas 当前分辨率共同决定采样方式。若未对齐，浏览器会启用双线性插值，降低清晰度。
- 确保目标宽高为整数，且与源图宽高同比例缩放（如源图 1200×800，目标区域设为 600×400，而非 600.5×400）
- 避免使用
drawImage(img, sx,sy,sw,sh, dx,dy,dw,dh)中的非整数dw/dh，尤其在压缩导出前 - 可先用
img.naturalWidth/img.naturalHeight获取原始像素尺寸，再按目标比例计算整数目标尺寸
压缩导出时的 toDataURL 质量控制与格式选择
toDataURL(type, quality) 的 quality 参数仅对 image/jpeg 和 image/webp 生效，对 PNG 无效。而真正影响文件体积的，不只是 quality，更是 canvas 上实际绘制的像素总量。
- 压缩前务必检查 canvas 实际像素数：
canvas.width × canvas.height。1920×1080 的 canvas 即使只画一张 300×200 的图，导出体积仍按 2073600 像素计算 - 推荐先用
ctx.scale()或重设 canvas 尺寸来降采样，再绘制，比单纯调低quality更有效保细节 - WebP 格式在同等质量下体积通常比 JPEG 小 25%~30%，现代浏览器支持良好，可作为默认输出格式
设备像素比（dpr）适配的典型实现模式
为兼顾高清屏清晰度与普通屏兼容性，需根据 window.devicePixelRatio 动态调整 canvas 内部分辨率，同时保持 CSS 显示尺寸不变。
- 获取目标显示宽高（如容器 clientWidth/clientHeight）
- 计算 canvas 属性尺寸：
canvas.width = targetWidth * dpr；canvas.height = targetHeight * dpr - 设置 CSS 尺寸为
targetWidth + 'px'和targetHeight + 'px' - 绘制前调用
ctx.scale(dpr, dpr)，使后续坐标单位与 CSS 像素对齐，避免手动换算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
