七牛图片拼接

最近更新时间: 2019-01-04 17:53:21

我们知道,七牛提供了很多图片处理的指令,比如图片缩放,裁减,加水印等。但是即使这样,有的时候,我们还是会有新的需求,比如图片拼接。

这个看上去七牛没有直接提供支持的指令,但是我们稍微动下脑筋,同样能根据已有的功能来实现图片拼接。
大多数情况下,图片拼接并不是要实现太复杂的拼接效果。所以我们可以使用图片水印和裁剪这两种指令来实现图片的基本拼接功能。

这个方法的基本步骤是:

  1. 创建一个比较大的背景图片,该图片的格式是png格式,背景透明。比如我们创建一个1000x1000的透明背景大图。之所以要选大的,就是为了尽量覆盖较多的图片大小。如果你的目标图片比这个还大,那么继续放大就行。因为大的背景方便裁剪。
  2. 根据七牛支持的图片水印功能,分别把图片添加到这个背景图片之上,添加的位置可以通过 watermark 指令(图片水印)的 gravity 参数来设置。下面是 gravity 参数的可选值。
  3. 将添加了水印的背景图片根据实际需要,裁减到指定的大小即可。

我们创建一个 1000X1000 大小的,背景透明的 png 格式图片 bg.png 上传到七牛空间。

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

文件 外链
bg.png http://dn-odum9helk.qbox.me/bg.png
movie1.png http://dn-odum9helk.qbox.me/movie1.png
movie2.png http://dn-odum9helk.qbox.me/movie2.png
movie3.png http://dn-odum9helk.qbox.me/movie3.png

这三个图片都是300x300的图片。我们需要将他们拼接起来构成300x900的大图片。
实时处理方式:

http://7xq8fj.com1.z0.glb.clouddn.com/bg.png?watermark/1/gravity/NorthWest/image/aHR0cDovLzd4cThmai5jb20xLnowLmdsYi5jbG91ZGRuLmNvbS9waWMxLnBuZw==|watermark/1/gravity/West/image/aHR0cDovLzd4cThmai5jb20xLnowLmdsYi5jbG91ZGRuLmNvbS9waWMyLnBuZw==|watermark/1/gravity/SouthWest/image/aHR0cDovLzd4cThmai5jb20xLnowLmdsYi5jbG91ZGRuLmNvbS9waWMzLnBuZw==|imageMogr2/gravity/NorthWest/crop/!300x900

持久化的方式: 根据 pfop 的接口参数,对应的 fops 参数为

watermark/1/gravity/NorthWest/image/aHR0cDovLzd4cThmai5jb20xLnowLmdsYi5jbG91ZGRuLmNvbS9waWMxLnBuZw==|watermark/1/gravity/West/image/aHR0cDovLzd4cThmai5jb20xLnowLmdsYi5jbG91ZGRuLmNvbS9waWMyLnBuZw==|watermark/1/gravity/SouthWest/image/aHR0cDovLzd4cThmai5jb20xLnowLmdsYi5jbG91ZGRuLmNvbS9waWMzLnBuZw==|imageMogr2/gravity/NorthWest/crop/!300x900|saveas/...

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

以上内容是否对您有帮助?
  • Qvm free helper
    Close