2011-03-15 109 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