canvas裁剪前必须确保图片加载完成，否则drawimage会静默失败；正确做法是将裁剪逻辑置于img.onload回调中，并注意跨域设置、内存释放、坐标转换及九参数调用规范。
Canvas裁剪前必须先加载图片到内存
直接用 drawImage 裁剪一个还没加载完成的 Image 对象，会静默失败——画布上什么也不出现，控制台也无报错。这是因为 Canvas 不会等待图片加载，它只按当前 Image 的 naturalWidth 和 naturalHeight 去读取像素数据，而未加载完成时这两个值是 0。
正确做法是把裁剪逻辑放在 img.onload 回调里：
const img = new Image();
img.src = '/path/to/photo.jpg';
img.onload = () => {
const canvas = document.getElementById('crop-canvas');
const ctx = canvas.getContext('2d');
// 此时 img.naturalWidth > 0，可安全裁剪
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
};
- 别在
img.src赋值前就调用drawImage - 如果图片来自用户
<input type="file">，记得用URL.createObjectURL(file)赋给img.src，且之后要手动URL.revokeObjectURL()防止内存泄漏 - 跨域图片（如 CDN 上的）需设置
img.crossOrigin = 'anonymous'，否则toDataURL()或读取像素会触发安全错误
drawImage 的九参数裁剪模式最常用
Canvas 的 drawImage 支持三种签名，实现“从原图某区域裁出、缩放到目标尺寸”必须用九参数版本：drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)。漏掉任意一个都会降级为五参数（全图绘制）或三参数（仅定位），达不到裁剪效果。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
sx/sy：源图像裁剪起点（左上角）在原图中的坐标 -
sw/sh：从源图裁出的宽高（不是目标尺寸） -
dx/dy：在 canvas 上绘制的起始位置（常设为 0, 0） -
dw/dh：绘制到 canvas 上的最终宽高（可等比缩放，也可拉伸） - 例如：原图 800×600，想裁出中间 400×300 区域并等比缩放到 200×150 显示，参数就是
drawImage(img, 200, 150, 400, 300, 0, 0, 200, 150)
获取裁剪结果要用 toDataURL 或 getImageData
裁剪只是把像素画到 canvas 上，不等于生成新图片。想导出为 PNG/JPEG，得调用 canvas.toDataURL('image/png')；想进一步处理像素（比如加滤镜），得用 ctx.getImageData(0, 0, canvas.width, canvas.height)。
-
toDataURL返回 base64 字符串，可直接赋给<img src>或发给后端 - 若需更高压缩率或指定质量，用
toDataURL('image/jpeg', 0.8)（第二个参数仅对 JPEG 有效） -
getImageData返回的是ImageData对象，其.data是Uint8ClampedArray，每 4 个值一组表示 RGBA，注意索引计算：第 (x,y) 像素的 R 值在data[(y * width + x) * 4] - 频繁读写像素性能差，别在动画帧里反复调用
getImageData+putImageData
移动端触摸事件坐标需转换为 canvas 像素坐标
在手机上拖拽选区时，touchstart / touchmove 的 clientX / clientY 是视口坐标，直接拿来算裁剪区域会错位——因为 canvas 可能被 CSS 缩放（如 width: 100%; height: auto），而 Canvas 内部坐标系只认它的 width / height 属性值（即绘图分辨率）。
- 先用
canvas.getBoundingClientRect()拿到 canvas 在页面中的实际尺寸和位置 - 再用
(touch.clientX - rect.left) * (canvas.width / rect.width)把 X 坐标转为 canvas 像素坐标 - 同理算 Y 坐标，注意别漏乘缩放比
- 如果 canvas 没设 CSS 宽高，只靠属性定义尺寸（如
<canvas width="800" height="600"></canvas>），那视口坐标和 canvas 坐标才一致
裁剪功能真正难的不是 API 调用，而是坐标对齐、跨域策略、内存释放和移动端适配这些细节——少处理一个，用户就可能导出黑图、白图或错位图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
