当前位置：首页>行业动态> 正文

html截取圆形图片

，，const c=document.getElementById(‘c’),img=new Image;，img.src=’image.jpg’;img.onload=()=>{，c.width=img.width;c.height=img.height;，const ctx=c.getContext(‘2d’);，ctx.drawImage(img,0,0);，const d=Math.min(c.width,c.height),r=d/2;，ctx.clearRect(0,0,c.width,c.height);，ctx.save();，ctx.beginPath();ctx.arc(r,r,r,0,2Math.PI);，ctx.clip();ctx.drawImage(img,-r,-r);，}，

实现原理

通过CSS样式将图片裁剪为圆形,核心使用border-radius属性配合容器尺寸控制。

技术要点说明
border-radius设为容器宽度的50%时，正方形区域变为圆形
overflow:hidden隐藏超出圆形范围的部分
容器尺寸需与图片宽高保持一致（建议设置为正方形）

基础实现步骤

  1. 准备正方形图片
    确保图片宽高相等（如400×400像素），可通过图片编辑工具裁剪或CSS强制变形：

    img {
  width: 200px;
  height: 200px;
  object-fit: cover; / 保持比例裁剪 /
}

  2. 创建圆形容器
    使用<div>包裹图片并设置圆角：

    <div class="circle-container">
  <img src="image.jpg" alt="圆形图片">
</div>

  3. 添加CSS样式

    .circle-container {
  width: 200px;          / 容器宽度 /
  height: 200px;         / 容器高度 /
  border-radius: 50%;    / 关键圆角设置 /
  overflow: hidden;      / 隐藏溢出部分 /
  display: flex;         / 可选：居中对齐 /
  align-items: center;
  justify-content: center;
}
.circle-container img {
  width: 100%;           / 图片撑满容器 /
  height: auto;
}

浏览器兼容性处理

浏览器支持情况解决方案
IE10+支持border-radius需添加-ms-前缀
Safari支持但渲染差异检查object-fit兼容性
移动端普遍支持测试低版本Android浏览器

扩展方法

  1. 使用clip-path精确裁剪

    .circle-clip {
  width: 200px;
  height: 200px;
  clip-path: circle(50%); / 标准语法 /
}

  2. SVG实现圆形头像

    <svg width="200" height="200">
  <circle cx="100" cy="100" r="100" stroke="#fff" stroke-width="4" />
  <image href="image.jpg" x="0" y="0" width="200" height="200" clip-path="url(#mask)"/>
</svg>

常见问题与解答

Q1：图片变形怎么办？
A1：调整object-fit属性：

  • contain：保持比例缩放，可能留白
  • cover：覆盖整个容器，可能裁剪
  • fill：强制拉伸填充（可能失真）

Q2：如何给圆形图片添加边框？
A2：在容器外层包裹新<div>并设置边框：

<div class="border-box">
  <div class="circle-container">...</div>
</div>
.border-box {
  border: 3px solid #ccc;
  padding: 5px; / 边框与圆形间距 /
}
0

相关文章