如何用html5实现自定义形状图片裁剪功能？

本文共计929个文字，预计阅读时间需要4分钟。

HTML5 本身不提供直接将图片裁剪成心形/星形等形状的原生 API。但可以通过 CSS3 的 `clip-path` 属性或 SVG 来实现这一效果。以下是一个使用 CSS `clip-path` 的简单示例：

注意：IE 完全不支持，Edge 旧版（

• clip-path: circle(50% at 50% 50%) → 圆形裁剪（居中，半径为宽高最小值的一半）
• clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) → 矩形（等效于无裁剪）
• clip-path: path("M20,50 Q50,10 80,50 T140,50") → 使用 SVG path 字符串（需转义双引号，且 Safari 对 path() 支持较晚）

用内联 SVG <clipPath> 精确控制复杂轮廓

当需要五角星、波浪边、手绘路径等非规则图形时，clip-path 的 path() 函数可能受限（尤其 Safari 15.4 之前），更稳妥的方式是把 <clipPath> 定义在 SVG 中，再通过 URL 引用。

关键点：SVG <clipPath> 必须放在 <defs> 内，且引用时路径需带 ID；图片要用 <img> 标签（不能是 CSS background-image），否则裁剪不生效。

立即学习“前端免费学习笔记（深入）”；

<svg width="0" height="0" style="position: absolute"> <defs> <clipPath id="star"> <path d="M50,0 L61,35 L97,35 L68,57 L79,92 L50,70 L21,92 L32,57 L3,35 L39,35 Z"/> </clipPath> </defs> </svg> <img src="photo.jpg" style="clip-path: url(#star)" width="200" height="200">

Canvas 裁剪适合动态生成或老浏览器兜底

如果必须支持 IE 或需要运行时计算裁剪形状（比如鼠标拖拽调整星形顶点），就得用 Canvas。核心是调用 ctx.clip() —— 它不是“把图切掉”，而是**设置后续绘制的遮罩区域**，所以得先画路径，再 drawImage。

容易踩的坑：clip() 只对之后的绘制生效，且默认裁剪区域是整个 canvas，不手动 beginPath() + moveTo() 就会出错；另外，Canvas 像素操作无法响应式缩放，需监听 window.resize 重绘。

• 先 ctx.beginPath()，再用 ctx.moveTo()/ctx.lineTo() 描出形状
• 调用 ctx.clip() 锁定裁剪区
• 用 ctx.drawImage(img, dx, dy, dw, dh) 把图“画进”该区域
• 若要导出裁剪后图片，用 canvas.toDataURL()

别忽略尺寸与坐标系差异

clip-path 的百分比单位基于元素自身盒模型（border-box），而 SVG <clipPath> 默认使用用户坐标系（即 viewBox 定义的坐标空间），Canvas 则完全基于像素。三者混用时极易错位。

例如：一张 width="300" 的 <img>，用 clip-path: circle(100px at 150px 150px) 是精确的；但若把它放进 viewBox="0 0 300 300" 的 SVG <clipPath>，同样数值才匹配。没设 viewBox 的 SVG，<clipPath> 会按 100%×100% 解析，导致形状被拉伸。

最省事的做法：统一用相对单位（%）或确保所有上下文的宽高一致；调试时临时加 outline: 1px solid red 看元素实际尺寸。