javascript - 使用 CSS/Javascript trim 图像空白？

Question

有没有人尝试过使用 CSS/JS 去除图像的白色(未使用)部分？我有一张图片 ( http://i.imgur.com/oA5ezhv.jpg )，其中包含被大量空白包围的实际内容，如果可能的话，我想使用纯 CSS 将其删除(可能是 position:absolute; clip:rect(0px,60px,200px,0px); 或 background-size:cover; 或组合)，但不幸的是，图像文件中实际内容的位置是未知的。期望的结果是单独显示钱包。

我宁愿避免使用 JS 解决方案，但如果有一些东西可以工作并且性能相当好，那就太棒了!可以在 PIL ( Trim whitespace using PIL ) 中执行，但如果我们有一个在 80% 以上的时间都运行良好的前端解决方案，最好避免它。

更新:以相对方式(百分比)巧妙猜测(或至少假设)背景位置或剪辑位置的最佳方式是什么？是否结合使用 background-position、clip 和 background-size 以获得所需的效果？

Answer 1

你可以使用背景位置，我为你做了这个

div {
  background: url('http://i.imgur.com/oA5ezhv.jpg') no-repeat;
  width: 230px;
  height: 160px;
  background-position: -35px -180px;
}

它制作一个裁剪大小的空容器，然后根据主体的位置定位背景

Here is the example working

如果图像是动态的并且空白比例发生变化，那么您将需要使用 javascript 或在服务器端执行(gd 或 php 中的 imagemagick)