七牛图片拼接

方案

我们知道，七牛提供了很多图片处理的指令，比如图片缩放，裁减，加水印等。但是即使这样，有的时候，我们还是会有新的需求，比如图片拼接。这个看上去七牛没有直接提供支持的指令，但是我们稍微动下脑筋，同样能根据已有的功能来实现图片拼接。

大多数情况下，图片拼接并不是要实现太复杂的拼接效果。所以我们可以使用图片水印和裁剪这两种指令来实现图片的基本拼接功能。

这个方法的基本步骤是： 
1.创建一个比较大的背景图片，该图片的格式是png格式，背景透明。比如我们创建一个1000x1000的透明背景大图。之所以要选大的，就是为了尽量覆盖较多的图片大小。如果你的目标图片比这个还大，那么继续放大就行。因为大的背景方便裁剪。

2.根据七牛支持的图片水印功能，分别把图片添加到这个背景图片之上，添加的位置可以通过watermark指令（水印指令）的gravity参数来设置。下面是gravity参数的可选值。

NorthWest     |     North      |     NorthEast
              |                |    
              |                |    
--------------+----------------+--------------
              |                |    
West          |     Center     |          East 
              |                |    
--------------+----------------+--------------
              |                |    
              |                |    
SouthWest     |     South      |     SouthEast

3.将添加了水印的背景图片根据实际需要，裁减到指定的大小即可。

实例

我们创建一个1000x1000大小的，背景透明的png格式图片bg.png上传到七牛空间。获得外链如下：http://7rf31q.com1.z0.glb.clouddn.com/bg.png。

然后我们将要拼接的图片movie1.png，movie2.png和movie3.png上传到七牛的空间，分别获得外链如下：

文件	外链
movie1	http://7rf31q.com1.z0.glb.clouddn.com/movie1.png
movie2	http://7rf31q.com1.z0.glb.clouddn.com/movie2.png
movie3	http://7rf31q.com1.z0.glb.clouddn.com/movie3.png

这三个图片都是300x300的图片。我们需要将他们拼接起来构成300x900的大图片。

实时处理方式：

http://7rf31q.com1.z0.glb.clouddn.com/bg.png
?watermark/1/gravity/NorthWest/image/aHR0cDovLzdyZjMxcS5jb20xLnowLmdsYi5jbG91ZGRuLmNvbS9tb3ZpZTEucG5n
|watermark/1/gravity/West/image/aHR0cDovLzdyZjMxcS5jb20xLnowLmdsYi5jbG91ZGRuLmNvbS9tb3ZpZTIucG5n
|watermark/1/gravity/SouthWest/image/aHR0cDovLzdyZjMxcS5jb20xLnowLmdsYi5jbG91ZGRuLmNvbS9tb3ZpZTMucG5n
|imageMogr2/gravity/NorthWest/crop/!300x900

点击查看效果

持久化的方式：

根据pfop的接口参数，对应的fops参数为：

watermark/1/gravity/NorthWest/image/aHR0cDovLzdyZjMxcS5jb20xLnowLmdsYi5jbG91ZGRuLmNvbS9tb3ZpZTEucG5n|watermark/1/gravity/West/image/aHR0cDovLzdyZjMxcS5jb20xLnowLmdsYi5jbG91ZGRuLmNvbS9tb3ZpZTIucG5n|watermark/1/gravity/SouthWest/image/aHR0cDovLzdyZjMxcS5jb20xLnowLmdsYi5jbG91ZGRuLmNvbS9tb3ZpZTMucG5n|imageMogr2/gravity/NorthWest/crop/!300x900|saveas/...

其中saveas的参数根据实际情况来替换。