如何裁剪图像边缘

Posted

技术标签:

【中文标题】如何裁剪图像边缘【英文标题】:How to crop an image edge 【发布时间】:2015-01-22 05:40:36 【问题描述】:

我想裁剪图像边缘以设置该边缘透明。当背景颜色为白色时,我使用 png 设置为该边缘。但是当它用于其他背景时,就会出现白边。所以我想知道。 这是样式的 CSS

 .cover-left-2 .avatar:after 
   width: 38px;
   height: 22px;
   background-position: -47px bottom;
 

.avatar:after 
   content: " ";
   display: block;
   position: absolute;
   left: 0;
   bottom: 0;
   opacity: 0.9;
   filter: alpha(opacity=80);
   pointer-events: none;
   background: url(../img/photo-corner-sw.png) no-repeat left bottom;
   background-image: url(../img/photo-corner-sw.svg);

图像。

【问题讨论】:

【参考方案1】:

我发现了一个 jquery 插件调用 polycrop。您只需将 jquery 添加到页面并将 polyclip 属性添加到元素(您要裁剪的图像)。

 <img src="http://lorempixel.com/200/150/people/1/Nishan/" 
        data-polyclip="0,0,199,0,199,151,50,150,0,97">

就是这样!

裁剪后的图像是这样的

jsfiddle 示例:http://jsfiddle.net/rb73hc53/

【讨论】:

以上是关于如何裁剪图像边缘的主要内容,如果未能解决你的问题,请参考以下文章

裁剪/删除图像边缘不需要的空间

使用精明边缘检测的图像裁剪[重复]

ios - 裁剪带有羽化边缘的图像

如何快速裁剪collectionview单元格之外的部分图像

如何使用 Python(或 Perl)检测“暗”图像边框并裁剪到它?

裁剪图像的透明边缘