上一篇
使用HTML5 Canvas剪切图片需先创建canvas元素，获取2D上下文，加载图片后，通过drawImage方法指定源图像剪切区域（x,y,width,height）及画布绘制位置与尺寸，注意图片异步加载，需在onload回调内执行绘制操作确保数据就绪。
HTML5 Canvas提供了强大的图像处理能力，通过JavaScript动态操作像素实现图片剪切，以下是详细步骤：
基础原理
Canvas剪切本质是控制绘制区域：
- 使用
drawImage()方法指定源图像和裁剪区域 - 通过
clip()方法定义画布上的显示区域 - 坐标系统以左上角为原点(0,0)，单位：像素
完整实现步骤
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 1. 加载图像
const img = new Image();
img.src = 'your-image.jpg';
img.onload = () => {
// 2. 定义裁剪区域（源图像坐标）
const sourceX = 50; // 起始X坐标
const sourceY = 30; // 起始Y坐标
const sourceWidth = 200; // 裁剪宽度
const sourceHeight = 150; // 裁剪高度
// 3. 定义画布绘制位置
const destX = 0; // 画布X位置
const destY = 0; // 画布Y位置
const destWidth = 200; // 绘制宽度（可缩放）
const destHeight = 150; // 绘制高度
// 4. 执行裁剪绘制
ctx.drawImage(
img,
sourceX, sourceY, sourceWidth, sourceHeight, // 源裁剪区
destX, destY, destWidth, destHeight // 目标绘制区
);
// 5. 高级裁剪（自定义形状）
ctx.beginPath();
ctx.arc(250, 250, 100, 0, Math.PI * 2); // 创建圆形路径
ctx.clip(); // 应用裁剪路径
ctx.drawImage(img, 150, 150, 200, 200); // 仅圆形区域显示
};
</script>
关键参数说明
| 参数 | 说明 | 示例值 |
|---|---|---|
sourceX/Y |
源图像裁剪起始点 | (50, 30) |
sourceWidth/Height |
源图像裁剪尺寸 | (200, 150) |
destX/Y |
画布绘制起始位置 | (0, 0) |
destWidth/Height |
画布绘制尺寸（支持缩放） | (200, 150) |
常见问题解决
- 图像跨域问题：
img.crossOrigin = "Anonymous"; // 添加CORS头
- 高清屏适配：
const dpr = window.devicePixelRatio; canvas.width = 500 * dpr; canvas.height = 500 * dpr; ctx.scale(dpr, dpr);
- 保存裁剪结果：
const dataURL = canvas.toDataURL('image/png'); const link = document.createElement('a'); link.download = 'cropped.png'; link.href = dataURL; link.click();
最佳实践
- 性能优化：
- 大图裁剪前用
createImageBitmap()解码 - 使用
willReadFrequently: true创建上下文避免重复读取像素
- 大图裁剪前用
- 兼容性处理：
- 所有现代浏览器均支持（包括移动端）
- IE9+需polyfill（使用ExplorerCanvas）
- 安全提示：
- 处理用户上传图片时用
createImageBitmap()防止反面代码 - 跨域图片需服务器配置
Access-Control-Allow-Origin
- 处理用户上传图片时用
引用权威来源：
MDN Canvas drawImage文档
W3C Canvas规范
Web图像处理最佳实践
通过Canvas实现图片剪切无需服务器交互,实时响应快，掌握核心API后，可扩展实现旋转、滤镜等高级功能，实际开发建议封装为可复用组件，注意内存释放（设置img.src = ''解除引用）。
