使用CSS/Javascript修剪圖像空白？

有沒有人用CSS/JS去除圖像中的白色（未使用）部分？我有一個圖像（http://i.imgur.com/oA5ezhv.jpg），其中包含許多空白的實際內容，如果可能的話，我想使用純CSS刪除大量空白（可能爲position:absolute; clip:rect(0px,60px,200px,0px);或background-size:cover;或組合），但不幸的是圖像文件中實際內容的位置不是衆所周知。理想的結果是單獨顯示錢包。使用CSS/Javascript修剪圖像空白？

我寧願避免一個JS解決方案，但如果有一些工作和相當高性能，它將會很棒！在PIL（Trim whitespace using PIL）中可以這樣做，但如果我們有一個能夠在80％以上的時間內正常工作的前端解決方案，它將很好的避免它。

image with white space

更新：什麼是巧妙地猜測（或至少承擔）以相對方式（百分比）的背景位置或夾位置的最佳方法是什麼？使用background-position,clip和background-size組合以獲得所需效果是否更好？

來源

2014-08-29 Steve

你可以使用背景位置，我做了這個給你

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）

來源

2014-08-29 22:20:45

關於動態尺寸的很好的編輯，我只是要指出:) – Tyblitz 2014-08-29 22:29:47

謝謝你的答案，upvoted！有什麼方法可以將JS用於未知空白比例的圖像？我也想知道是否可以使用CSS background-position w/percentages而不是像素？只需依靠前端就可以獲得大多數時間運行良好的解決方案。 – Steve 2014-08-29 22:34:24

是的，百分比也是可能的，大多數單位據我所知，併爲JavaScript部分檢查這個問題http://stackoverflow.com/questions/12175991/crop-image-white-space-automatically-using-jquery – 2014-08-29 22:36:32

使用CSS/Javascript修剪圖像空白？

回答

相關問題