HTML5怎样实现图片裁剪_HTML5实现图片裁剪操作【形状】_技术教程

HTML5矩形裁剪最可控，需用+JS：读取图片→绘制到canvas→监听事件画矩形选框→drawImage按原图坐标裁剪→toBlob导出。

用手动实现矩形裁剪最可控

HTML5 本

身没有内置的“图片裁剪”标签或 API，所谓“HTML5 实现裁剪”，实际是靠 + JavaScript 模拟交互式选区 + 绘制裁剪区域。矩形裁剪是最常用、兼容性最好、逻辑最清晰的起点。

关键步骤：

用读取用户上传的图片（FileReader 转为 data URL）
将图片绘制到上，监听鼠标/触摸事件画出可拖拽缩放的矩形选框（推荐用 getBoundingClientRect() 校准坐标，避免缩放/滚动偏移）
裁剪时调用 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) —— 注意前四个参数是原图坐标，不是 canvas 显示坐标
用 canvas.toDataURL('image/png') 或 canvas.toBlob() 导出裁剪结果

const canvas = document.getElementById('cropCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  ctx.drawImage(img, 0, 0);
  // 假设已确定裁剪区域：x=50, y=30, width=200, height=150
  const croppedCanvas = document.createElement('canvas');
  croppedCanvas.width = 200;
  croppedCanvas.height = 150;
  const cCtx = croppedCanvas.getContext('2d');
  cCtx.drawImage(img, 50, 30, 200, 150, 0, 0, 200, 150);
  const croppedDataUrl = croppedCanvas.toDataURL('image/jpeg', 0.9);
};

圆形裁剪必须用 `clip()` 配合路径

矩形裁剪靠 drawImage 的源区域参数就能搞定；但圆形、椭圆、多边形等非矩形形状，必须用 ctx.clip() 先定义裁剪路径，再绘制整张图——否则会漏掉边缘或变形。

常见误区：直接对 canvas 设置 border-radius 只是视觉遮罩，导出时仍是完整矩形。

先用 ctx.beginPath() + ctx.arc() 画圆
立即调用 ctx.clip()（注意：clip 只对后续绘制生效）
再用 ctx.drawImage(img, 0, 0) 绘制原图，超出圆形的部分自动被裁掉
若需居中裁剪，计算圆心为 canvas.width / 2、canvas.height / 2，半径取二者最小值的一半

ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) / 2, 0, Math.PI * 2);
ctx.clip();
ctx.drawImage(img, 0, 0); // 此时只显示圆形区域

`canvas.toBlob()` 比 `toDataURL()` 更适合生产环境

toDataURL() 返回 base64 字符串，体积比原始二进制大 ~33%，上传慢、内存占用高，且无法控制压缩质量（JPEG 场景下尤其明显）。toBlob() 直接生成 Blob 对象，可直接传给 FormData 提交，也便于用 URL.createObjectURL() 预览。

Chrome/Firefox/Edge 16+ 支持 toBlob()，Safari 14.1+ 开始支持（iOS Safari 14.5+）
调用时注意第三个参数仅对 image/jpeg 和 image/webp 有效，image/png 忽略
务必在 drawImage 完成后再调用，否则得到空白 Blob

移动端触摸事件必须处理 `touchstart/touchmove/touchend`

仅监听 mousedown 在手机上完全失效。裁剪框的拖拽、缩放操作在 iOS/Android 上必须同时绑定触摸事件，并阻止默认行为（e.preventDefault()），否则会触发页面滚动或双指缩放。

用 e.touches[0].clientX 替代 e.clientX，并统一用 getBoundingClientRect() 计算相对于 canvas 的坐标
双指缩放需监听 touches 长度和间距变化，不要依赖 gesturestart（已被废弃）
iOS Safari 中默认唤起相机，加 accept="image/*" capture="user" 可强制前置摄像头

真正容易被忽略的是：裁剪坐标的基准必须始终是原图尺寸（naturalWidth/naturalHeight），而不是 canvas 的显示宽高。一旦 canvas 被 CSS 缩放，或图片被拉伸显示，所有鼠标坐标都要按比例换算回原始像素，否则裁出来的图会严重错位。