1.前言
最近发现项目里使用的Xutils的BitmapUtils加载图片出了点问题,总会有一些图片被自动旋转了90度。
项目里的上传图片使用的是七牛云,七牛云可以上传图片,并依赖调用生成的图片路径配置不一样的参
数进行操作,比如图片瘦身,缩放,水印,圆角之类的操作,加载速度也是可以的
https://developer.qiniu.com/dora/manual/1269/pictures-basic-information-imageinfo
经过查看,当七牛返回的路径没有加_pix的时候,部分情况下会自动旋转,原因不知,于是用了Glide
进行图片加载。Glide加载图片目前没有发现会有旋转问题。顺带着优化了下图片的加载,做了类似
微信朋友圈点击查看大图的缩略图加载效果,即先加载缩略图,配有加载提示框,等原图加载完毕后
直接显示原图,去掉加载框。
2.准备
查看七牛的加载缩略图简介
/0/w/<LongEdge>/h/<ShortEdge>
限定缩略图的长边最多为<LongEdge>,短边最多为<ShortEdge>,进行等比缩放,不裁剪。如果只指定
w 参数则表示限定长边(短边自适应),只指定 h 参数则表示限定短边(长边自适应)。
示例: http://odum9helk.qnssl.com/resource/gogopher.jpg?imageView2/1/w/200/h/200
这种情况我们可以直接访问其缩略图进行加载。
3.实现
a. 利用Glide测绘的width和height传给七牛,获取手机所需要加载的尺寸,避免完全加载图片,效果几乎
一致并不会发生很多失真。
public class ImageLoader extends BaseGlideUrlLoader<ImageSizeModel>
{
@overide
public void ImageLoader(Context context)
{
super(context);
}
@overide
protected String getUrl(ImageSizeModel imageSizeModel,int width,int height)
{
return imageSizeModel.getImageSizeUrl(width,height);
}
}
此处继承了Glide自带的BaseGlideUrlLoader,获取宽高(此处宽高为手机屏幕的宽高,返回的是像素值,
比如我们常见的1980x1080,1080x720etc)以后传给当前的model再返回图片url以确定当前手机所需要
展现的图片的最大尺寸。
b.自定义图片尺寸接口,并实现该接口
//自定义接口
public interface ImageSizeModel
{
String getImageSizeUrl(int width,int height);
String getBaseUrl();
}
//实现该接口
public class ImageSizeModelImpl implements ImageSizeModel
{
private String baseUrl;
public void ImageSizeModelImpl(String baseUrl)
{
this.baseUrl = baseUrl;
}
@overide
public String getImageSizeUrl(int width,int height)
{
//imageslim 也是七牛给出的缩小图片尺寸的方法
return this.BaseUrl + "?imageslim&imageview2/0/w/" + width + "/h/" + height;
}
@overide
public String getBaseUrl()
{
return this.baseUrl;
}
}
c.Glide请求并加载图片 thumbnail手指甲,手指甲一样小的东西,这里指缩略图
Glide.with(context)
.using(new ImageLoader(context))
.load(imageSizeModel)
.listener(listener)
.thumbnail(drawableBuilder)
.into(imageview);
其中model需要实例化后传过来;listener可以new出新监听对象进行监听进行操作,比如显隐
加载提示框;drawableBuilder是自定义的缩略图的对象,可以自己赋值获取相应宽高的图片。
--> ImageSizeModelImpl imageSizeModeliImpl = new ImageSizeModelImpl(url);
--> public class MyRequestListener implements RequestListener<ImageSizeModel,GlideDrawable>
{
@Override
public boolean onException(Exception e, CustomImageSizeModel model, Target<GlideDrawable>
target, boolean isFirstResource) {
return false;
}
@Override
public boolean onResourceReady(GlideDrawable resource, CustomImageSizeModel model,
Target<GlideDrawable> target, boolean isFromMemoryCache,
boolean isFirstResource) {
loadingView.setVisibility(View.GONE);
return false;
}
}
--> DrawableRequestBuilder drawableBuilder = Glide.with(context)
.load(new ImageModelImpl(imageSizeModeliImpl.getBaseUrl()).getImageSizeUrl(100,100));
这里七牛会选择你给的参数最接近的正确参数值返回图片信息。
--> 一般情况下的Glide加载图片的时候是不用.using(new ImageLoader(context))的,这里是为了让其识别我们自己
传过来的宽高。
最近发现项目里使用的Xutils的BitmapUtils加载图片出了点问题,总会有一些图片被自动旋转了90度。
项目里的上传图片使用的是七牛云,七牛云可以上传图片,并依赖调用生成的图片路径配置不一样的参
数进行操作,比如图片瘦身,缩放,水印,圆角之类的操作,加载速度也是可以的
https://developer.qiniu.com/dora/manual/1269/pictures-basic-information-imageinfo
经过查看,当七牛返回的路径没有加_pix的时候,部分情况下会自动旋转,原因不知,于是用了Glide
进行图片加载。Glide加载图片目前没有发现会有旋转问题。顺带着优化了下图片的加载,做了类似
微信朋友圈点击查看大图的缩略图加载效果,即先加载缩略图,配有加载提示框,等原图加载完毕后
直接显示原图,去掉加载框。
2.准备
查看七牛的加载缩略图简介
/0/w/<LongEdge>/h/<ShortEdge>
限定缩略图的长边最多为<LongEdge>,短边最多为<ShortEdge>,进行等比缩放,不裁剪。如果只指定
w 参数则表示限定长边(短边自适应),只指定 h 参数则表示限定短边(长边自适应)。
示例: http://odum9helk.qnssl.com/resource/gogopher.jpg?imageView2/1/w/200/h/200
这种情况我们可以直接访问其缩略图进行加载。
3.实现
a. 利用Glide测绘的width和height传给七牛,获取手机所需要加载的尺寸,避免完全加载图片,效果几乎
一致并不会发生很多失真。
public class ImageLoader extends BaseGlideUrlLoader<ImageSizeModel>
{
@overide
public void ImageLoader(Context context)
{
super(context);
}
@overide
protected String getUrl(ImageSizeModel imageSizeModel,int width,int height)
{
return imageSizeModel.getImageSizeUrl(width,height);
}
}
此处继承了Glide自带的BaseGlideUrlLoader,获取宽高(此处宽高为手机屏幕的宽高,返回的是像素值,
比如我们常见的1980x1080,1080x720etc)以后传给当前的model再返回图片url以确定当前手机所需要
展现的图片的最大尺寸。
b.自定义图片尺寸接口,并实现该接口
//自定义接口
public interface ImageSizeModel
{
String getImageSizeUrl(int width,int height);
String getBaseUrl();
}
//实现该接口
public class ImageSizeModelImpl implements ImageSizeModel
{
private String baseUrl;
public void ImageSizeModelImpl(String baseUrl)
{
this.baseUrl = baseUrl;
}
@overide
public String getImageSizeUrl(int width,int height)
{
//imageslim 也是七牛给出的缩小图片尺寸的方法
return this.BaseUrl + "?imageslim&imageview2/0/w/" + width + "/h/" + height;
}
@overide
public String getBaseUrl()
{
return this.baseUrl;
}
}
c.Glide请求并加载图片 thumbnail手指甲,手指甲一样小的东西,这里指缩略图
Glide.with(context)
.using(new ImageLoader(context))
.load(imageSizeModel)
.listener(listener)
.thumbnail(drawableBuilder)
.into(imageview);
其中model需要实例化后传过来;listener可以new出新监听对象进行监听进行操作,比如显隐
加载提示框;drawableBuilder是自定义的缩略图的对象,可以自己赋值获取相应宽高的图片。
--> ImageSizeModelImpl imageSizeModeliImpl = new ImageSizeModelImpl(url);
--> public class MyRequestListener implements RequestListener<ImageSizeModel,GlideDrawable>
{
@Override
public boolean onException(Exception e, CustomImageSizeModel model, Target<GlideDrawable>
target, boolean isFirstResource) {
return false;
}
@Override
public boolean onResourceReady(GlideDrawable resource, CustomImageSizeModel model,
Target<GlideDrawable> target, boolean isFromMemoryCache,
boolean isFirstResource) {
loadingView.setVisibility(View.GONE);
return false;
}
}
--> DrawableRequestBuilder drawableBuilder = Glide.with(context)
.load(new ImageModelImpl(imageSizeModeliImpl.getBaseUrl()).getImageSizeUrl(100,100));
这里七牛会选择你给的参数最接近的正确参数值返回图片信息。
--> 一般情况下的Glide加载图片的时候是不用.using(new ImageLoader(context))的,这里是为了让其识别我们自己
传过来的宽高。