如何使用HTML5画布功能裁剪图片？详细步骤与代码实例解析

HTML5的canvas为前端图片处理提供了原生支持，借助它可以不依赖任何第三方库完成图片裁剪。裁剪的本质是利用drawImage方法将源图片的某一部分绘制到画布上，再通过toDataURL导出新图。整个过程都在浏览器中完成，响应迅速。

一、基本裁剪原理

canvas的drawImage有九参数重载形式：

// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
// sx, sy 为源图裁剪起点；sWidth, sHeight 为裁剪尺寸
// dx, dy 为目标画布绘制起点；dWidth, dHeight 为绘制尺寸

我们只需要设置源图裁剪区域，并将目标区域设为画布大小，即可实现裁剪。

二、完整裁剪步骤

1. 准备页面结构

页面中需要一个隐藏或显示的canvas以及一个文件输入框：

<input type="file" id="upload" accept="image/*">
<canvas id="cropCanvas" width="300" height="300"></canvas>
<button id="saveBtn">保存裁剪图</button>

2. 加载并裁剪图片

通过FileReader读取本地图片，然后在image.onload中执行绘制：

const upload = document.getElementById('upload');
const canvas = document.getElementById('cropCanvas');
const ctx = canvas.getContext('2d');

upload.addEventListener('change', function (e) {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function (ev) {
    const img = new Image();
    img.onload = function () {
      // 假设裁剪原图从(50,50)开始的200x200区域
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 50, 50, 200, 200, 0, 0, canvas.width, canvas.height);
    };
    img.src = ev.target.result;
  };
  reader.readAsDataURL(file);
});

3. 导出裁剪结果

点击保存时将canvas内容转为图片地址：

document.getElementById('saveBtn').addEventListener('click', function () {
  const url = canvas.toDataURL('image/png');
  const a = document.createElement('a');
  a.href = url;
  a.download = 'cropped.png';
  a.click();
});

三、常见问题与注意点

• 跨域图片需设置img.crossOrigin = 'anonymous'，且服务器允许跨域，否则canvas会被污染无法导出。
• 高清屏下应使用devicePixelRatio放大画布像素，避免裁剪后模糊。
• 若裁剪区域超出原图范围，超出部分会绘制为透明。

四、小结

使用HTML5画布裁剪图片主要依赖drawImage的源区域参数，配合FileReader与toDataURL即可实现纯前端裁剪。掌握坐标计算和跨域处理，就能应对大部分业务中的图片截取需求。

HTML5canvasimage_cropping修改时间：2026-07-31 11:15:20