Canvas实现图片裁剪与缩放的核心是drawImage九参数法：先用img.naturalWidth/Height获取原始尺寸，再通过sx/sy/sw/sh确定源裁剪区域，dx/dy/dw/dh控制目标绘制区域，结合scale变量映射鼠标坐标，并用toBlob高效导出结果。
Canvas 实现图片裁剪与缩放，核心是用 drawImage 控制图像绘制区域和尺寸，并结合事件监听实现交互。整个过程不依赖后端，所有操作都在浏览器完成。
加载图片并准确获取原始尺寸
直接用 <img alt="JavaScript 中 Canvas 怎么实现图片裁剪与缩放" > 显示上传的文件时，浏览器可能自动缩放，导致坐标错乱。必须等图片加载完成、读取真实宽高后再渲染：
- 用
URL.createObjectURL(file)快速生成本地预览地址 - 把该地址赋给
<img alt="JavaScript 中 Canvas 怎么实现图片裁剪与缩放" >的src，监听load事件 - 在
img.onload回调里获取img.naturalWidth和img.naturalHeight，这才是原始像素尺寸
缩放：靠 CSS + Canvas 坐标映射联动
单纯用 transform: scale() 放大图片会导致鼠标坐标与图像像素不匹配。推荐做法是：在 Canvas 上绘制缩放后的图像，同时维护一个“缩放系数”变量，把用户拖拽/滚轮操作转换为对原始图像坐标的偏移：
- 设缩放倍数
scale = 1.5，则 Canvas 绘制时传入drawImage(img, 0, 0, img.width * scale, img.height * scale) - 鼠标位置需反向换算：若 Canvas 宽高为 400×300，显示区域实际覆盖了原始图的
(x/scale, y/scale)区域 - 滚轮事件监听
deltaY，动态调整scale（建议限制在 0.2～3.0 之间）
裁剪：用 drawImage 的九参数截取目标区域
裁剪不是“擦除”，而是从原图中提取一块像素，重绘到新 Canvas。关键在于明确四组坐标：
立即学习“Java免费学习笔记（深入）”；
-
源区域（原图上要截哪一块）：起点
sx, sy+ 宽高sw, sh -
目标区域（画到新 Canvas 的哪）：起点
dx, dy+ 宽高dw, dh - 例如：截取原图中间 200×200 像素区域，并等比缩放到 150×150 输出：
ctx.drawImage(img, (w-200)/2, (h-200)/2, 200, 200, 0, 0, 150, 150)
导出裁剪结果：优先用 toBlob 而非 toDataURL
生成最终图片时，toBlob 比 toDataURL 更高效，尤其对大图：
-
canvas.toBlob(callback, 'image/jpeg', 0.9)直接输出 Blob 对象，内存占用低 - Blob 可直接塞进
FormData上传，或用URL.createObjectURL(blob)生成预览链接 - 避免 Base64 编码膨胀（体积增约 33%），也绕开部分浏览器对 Data URL 长度的限制
