2011-03-15 130 views
3

我們有要求顯示短/較大尺寸的圖像。 (例如,我可以將公交車的前部,公交車的後部和公交車的中間部分作爲單獨的圖像)。如何處理/操作分割圖像

因此,要證明上述,我可以嘗試

front,middle,middle,back (to construct shorter image) 
front,middle,middle,middle,middle,back (to construct bigger image) 

是否有哪些讓你下載這些影像(即他們已經分割)或者這將是從一個已經實現這個更簡單的方法任何網站可用的圖像。

回答

7

您可以使用ImageMagick。檢查following example

在你的情況,如果你希望只在橫向分割圖像(假設)200個像素切片:

convert -crop 200 +repage verybig.jpg slice%02d.jpg 
+0

我不希望到外部文件從外部網站上覆制,但是否有辦法來分割任何圖像使用圖像處理工具(如我們所提供的圖像)。 – user339108 2011-03-18 10:58:46

+0

我根據你的評論修改了我的答案。 – vbence 2011-03-18 11:04:37

+0

這是你需要的嗎? – vbence 2011-03-18 15:25:49

2

的切片和切塊,也可以與Gimp完成。

查看GIMP的濾鏡 - >地圖 - >無縫製作。它用於使拼貼在水平和垂直方向無縫連接。您可以通過在上方和下方添加額外的背景來使用它來製作水平可重複的圖塊,然後在裁剪掉多餘圖塊後使用它。

一個更復雜的無縫連接工具是panotools

如果您將巴士的一半中間部分與後部和中間的一半包括在前部,那麼最簡單的方法就是將這些部分組合在一起。你不會得到一輛沒有中路的公共汽車,但從問題來看,這不是你需要的。

3

您可以使用HTML/CSS對現有圖像進行切片和裁切,通過設置多個與背景相同圖像的相鄰元素,然後操作寬度和背景位置以獲得所需的效果。

下面是一個例子:http://jsfiddle.net/gjJcM/

你需要了解一下你正在使用,使這種無縫的圖像內容 - 我需要更多的背景下,想進一步的細節。

HTH

+0

我不會建議使用彼得的解決方案,因爲它不是最優的。他的想法要求爲每個CSS div/span/etc加載整個圖像,這大大增加了加載時間,而不是加載較小的「大小」圖像。它與使用CSS將1000x1000圖像調整爲10x10並將其稱爲縮略圖大致相同,即使它具有小型顯示器,用戶仍然需要下載整個全尺寸文件。 – SQueryL 2011-03-24 21:32:01

+1

彼得的迴應是一個有效的解決方案。這與在HTML5中使用CSS精靈是一樣的。對於大文件,服務器只命中一次,然後在瀏覽器中對文件進行操作。 – 2011-03-25 00:17:41

+0

成本/收益將取決於基本圖像大小的細節以及它以多少HTML結果顯示在用作背景的各種HTML元素中(在問題中沒有足夠的細節知道)。 – peteorpeter 2011-03-26 12:25:27