图片处理常见问题
1 图片多水印demo
关于水印接口使用说明可以参考:
http://developer.qiniu.com/code/v6/api/kodo-api/image/watermark.html
此例使用原始图片:
http://developer.qiniu.com/resource/gogopher.jpg
此例使用水印图片:
http://www.b1.qiniudn.com/images/logo-2.png
单水印直接在后面加watermark参数就可以了:
http://developer.qiniu.com/resource/gogopher.jpg?watermark/1/image/aHR0cDovL3d3dy5iMS5xaW5pdWRuLmNvbS9pbWFnZXMvbG9nby0yLnBuZw==/dissolve/50/gravity/SouthEast/dx/20/dy/20
多水印在加好的水印图片后面在使用管道符”|”再次加水印操作的参数就可以了:
http://developer.qiniu.com/resource/gogopher.jpg?watermark/1/image/aHR0cDovL3d3dy5iMS5xaW5pdWRuLmNvbS9pbWFnZXMvbG9nby0yLnBuZw==/dissolve/50/gravity/SouthEast/dx/20/dy/20|watermark/1/image/aHR0cDovL3d3dy5iMS5xaW5pdWRuLmNvbS9pbWFnZXMvbG9nby0yLnBuZw==/dissolve/50/gravity/SouthEast/dx/20/dy/300
需要注意的是watermark/1, 水印图片不能比原图大，否则返回没有加水印的原图; watermark/3水印图片可以比原图大, 以下为区别:
使用watermark/1
http://developer.qiniu.com/resource/gogopher.jpg?watermark/1/image/aHR0cDovL3d3dy5iMS5xaW5pdWRuLmNvbS9pbWFnZXMvbG9nby0yLnBuZz9pbWFnZU1vZ3IyL3RodW1ibmFpbC8xMDAweA==/dissolve/50/gravity/SouthEast/dx/20/dy/20
2 图片旋转的问题, 包含图片有EXIF浏览器怎样处理
当图片中包含EXIF信息里面有Orientation参数的时候，浏览器会自动识别这个参数，从而在原始图片基础上自动加以旋转，具体可以参考:http://blog.csdn.net/netdxy/article/details/49108489
这里说明一点的是当图片中有EXIF Orientation参数的时候使用imageInfo获取图片的宽高参数的时候获得的是去掉EXIF信息是的图片的宽高的信息.
比如这张图片：
http://7xkt2b.com1.z0.glb.clouddn.com/FgXvI-wvFydLlooOOVSYPyCCfWzA
我们看到的是浏览器自动旋转后的效果，貌似是宽要比高短，但是用imageMogr2/strip去掉EXIF信息后图片的宽要比高长:
http://7xkt2b.com1.z0.glb.clouddn.com/FgXvI-wvFydLlooOOVSYPyCCfWzA?imageMogr2/strip
我们用http://7xkt2b.com1.z0.glb.clouddn.com/FgXvI-wvFydLlooOOVSYPyCCfWzA?imageInfo 获取到的宽高信息也正是后者，如下:
{format: "jpeg",width: 3264,height: 2448,colorModel: "ycbcr",orientation: "Right-top"}12345671234567
3 图片最佳压缩方案
使用七牛图片压缩功能主要是为了加载的时候能够节省下载流量，访问更流畅，所以很多用户关心怎样将size压缩到最小，这里给出一些具体的方案:
本例中用到的测试图片是：
http://7xkr3o.com1.z0.glb.clouddn.com/testdemo.jpg
大小：1.7 MB 分辨率：width: 790,height: 2682
1).使用我们的imageView2或者imageMogr2接口改变图片的分辨率：
http://7xkr3o.com1.z0.glb.clouddn.com/testdemo.jpg?imageMogr2/thumbnail/500x
大小：168 KB 分辨率: width: 500,height: 1697
2).如果图片有exif信息的话用strip去除视频元信息图片size会降低不少：
可以查看图片的元信息：
http://7xkr3o.com1.z0.glb.clouddn.com/testdemo.jpg?exif
http://7xkr3o.com1.z0.glb.clouddn.com/testdemo.jpg?imageMogr2/strip
大小：360 KB 分辨率：width: 790,height: 2682
3).如果是jpg图片格式的话是可以通过降低图片的quality来改变图片的大小:
http://7xkr3o.com1.z0.glb.clouddn.com/testdemo.jpg?imageMogr2/quality/50
大小：233 KB 分辨率：width: 790,height: 2682
4).可以通过转换图片的格式来达到改变图片的大小：
bmp格式比png要大得多，而png可能比jpg又大得多，而jpg又可能比google最新推出的webp格式大得多
可以参考：
http://kb.qiniu.com/5u81efco
http://blog.csdn.net/guoer9973/article/details/44345451
5).以上几种方式集成在一起效果会更好：
http://7xkr3o.com1.z0.glb.clouddn.com/testdemo.jpg?imageMogr2/thumbnail/500x/strip/quality/50/format/webp
大小：69 KB 分辨率：width: 790,height: 2682
4 图片裁剪位置设定demo
对于图片裁剪，主要是需要设置裁剪的宽高以及裁剪的偏移的位置,可以参考文档:
http://developer.qiniu.com/code/v6/api/kodo-api/image/imagemogr2.html#imagemogr2-crop-size-spec
比如这张图片:
http://7xl4cg.com1.z0.glb.clouddn.com/aaaabb.jpg
从源图坐标为x:300,y:300处截取300x400的子图片参数如下:
http://7xl4cg.com1.z0.glb.clouddn.com/aaaabb.jpg?imageMogr2/crop/!300x400a300a300
更多实例可以参考:
http://developer.qiniu.com/code/v6/api/kodo-api/image/imagemogr2.html#imagemogr2-samples
5 ignore-error参数什么时候用
有的图片由于本身格式有问题我们这边不支持处理，比如这个图片:
http://7xsjg3.com1.z0.glb.clouddn.com/3p0UYnq610sqJP8G.gif
加参数处理会报错:
http://7xsjg3.com1.z0.glb.clouddn.com/3p0UYnq610sqJP8G.gif?imageView2/2/w/700
error: “unsupported formatgif: not enough image data”
这个时候可以加一个ignore-error参数表示的是处理不了的时候返回原图:
http://7xsjg3.com1.z0.glb.clouddn.com/3p0UYnq610sqJP8G.gif?imageView2/2/w/700/ignore-error/1
6 样式 包含样式个数以及样式后使用管道这种操作是不行的
对于设置了样式的图片，加样式后再加管道或者别的样式是不支持的, 比如这个图片加样式:
http://7xl4cg.com1.z0.glb.clouddn.com/aaaabb.jpg-small
再加管道是处理不了的:
http://7xl4cg.com1.z0.glb.clouddn.com/aaaabb.jpg-small|imageView2/2/w/10
7 图片处理同步saveas的demo
对于小于20M的图片，七牛这边提供同步处理的接口，即直接Get请求访问(比如直接在浏览器地址栏输入访问)，可以参考用法:http://developer.qiniu.com/code/v6/api/dora-api/saveas.html#示例
这里给出Java SDK的具体的Demo:
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
import com.qiniu.util.StringUtils;
import com.qiniu.util.UrlSafeBase64;
public class SaveasDemo {
public static void tokendownload() throws NoSuchAlgorithmException, InvalidKeyException{
String ACCESS_KEY = "xxxx";
String SECRET_KEY = "xxxx";
String urlbase64 = UrlSafeBase64.encodeToString("javademo:123456aaa.jpg");
String DownloadUrl = "7xrnxn.com1.z0.glb.clouddn.com/QQ20160402-2.png?imageMogr2/crop/!300x300a10a10|saveas/"+urlbase64;
Mac mac = javax.crypto.Mac.getInstance("HmacSHA1");
mac.init(new SecretKeySpec(StringUtils.utf8Bytes(SECRET_KEY),"HmacSHA1"));
String t2 = UrlSafeBase64.encodeToString(mac.doFinal(StringUtils.utf8Bytes(DownloadUrl)));
System.out.println(DownloadUrl+"/sign/"+ACCESS_KEY+":"+t2);
}
public static void main(String args[]) throws InvalidKeyException, NoSuchAlgorithmException{
tokendownload();
}
}1234567891011121314151617181920212223242512345678910111213141516171819202122232425
浏览器访问的情况如下，在saveas设置的保存的空间里面可以看到保存的缩放的图片:
8 以留白的方式裁剪图片
以留白的方式裁剪图片可使用extent和background两个参数，如：
http://78re52.com1.z0.glb.clouddn.com/resource/gogopher.jpg?imageMogr2/thumbnail/400x/extent/400x400/background/YmxhY2s=
您想要白色，将“YmxhY2s=”换成“d2hpdGU=”（由white经过base64编码获得）
9.图片处理水印不居中显示处理方法
关于图片大水印操作，比如只指定gravity/South，理论上来说水印会出现在最下方中间，但是其实不是，是会有一些像素偏移的，这个时候可以加上/dx/0参数表示水印处于水平方向最中间，如果加上/dy/0表示在垂直方向中间位置,以下为对比的情况: