Firebase 图像存储 - 缩略图
Posted
技术标签:
【中文标题】Firebase 图像存储 - 缩略图【英文标题】：Firebase Image Storage - Thumbnail 【发布时间】：2017-01-19 10:57:18 【问题描述】：我的 android 应用程序中有 picasso，所以我可以从 firebase 存储中检索图像 URL 到我的 recyclerview 并显示它，现在，我想添加一个占位符，以便用户可以看到图像何时加载，但是，我想要像每个应用程序那样做，首先像小尺寸的一样模糊图像（缩略图），然后显示原始图像（NOT-BLURED）。
我一直在搜索 Stack Overflow，我找到了很棒的解决方案，例如，制作 2 个毕加索语句，一个用于缩略图，然后，onsucceed 方法给我带来了原始图像，但我有一个问题，我需要2张图片，先显示原图的缩略图，再显示原图。
那么，如果我只是将一张图片上传到服务器，我该如何检索 2 张图片呢？
这是我在 SO 中发现的一个小东西：
Transformation blurTransformation = new Transformation()
@Override
public Bitmap transform(Bitmap source)
Bitmap blurred = Blur.fastblur(LiveImageView.this.context, source, 10);
source.recycle();
return blurred;
@Override
public String key()
return "blur()";
;
Picasso.with(context)
.load(thumbUrl) // thumbnail url goes here
.placeholder(R.drawable.placeholder)
.resize(imageViewWidth, imageViewHeight)
.transform(blurTransformation)
.into(imageView, new Callback()
@Override
public void onSuccess()
Picasso.with(context)
.load(url) // image url goes here
.resize(imageViewWidth, imageViewHeight)
.placeholder(imageView.getDrawable())
.into(imageView);
@Override
public void onError()
);
【问题讨论】：
您是否尝试过通过 XML 将占位符图像添加到您的 ImageView（将占位符图像添加到可绘制文件夹中）并从 Picasso 加载原始图像？或者，如果您想对两个图像都使用 Picasso，请将占位符图像手动上传到 Firebase 存储并从 Firebase 控制台获取下载 URL。 @RamithDR 是的，我可以在我的 drawable 中放置一个标准图像，但我不想一个标准图像，我想在它完全加载之前将我上传到服务器的图像作为一个模糊的缩略图，看看这个abdelhadymu.files.wordpress.com/2015/02/whatsapp.png?w=634 请记住，上传到 aerver 的 pica 是随机的，而且每次都不相同，这就是为什么我不能放置标准占位符 在下面查看我的答案 【参考方案1】：好吧，我想通了，不得不说那是相当脑筋急转弯！
第 1 步
首先你需要创建一个Blur Java 类：
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Build;
import android.renderscript.Allocation;
import android.renderscript.Element;
import android.renderscript.RenderScript;
import android.renderscript.ScriptIntrinsicBlur;
/**
* Created by RamithRD on 9/12/2016.
*/
public class Blur
@SuppressLint("NewApi")
public static Bitmap fastblur(Context context, Bitmap sentBitmap, int radius)
if (Build.VERSION.SDK_INT > 16)
Bitmap bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);
final RenderScript rs = RenderScript.create(context);
final Allocation input = Allocation.createFromBitmap(rs, sentBitmap, Allocation.MipmapControl.MIPMAP_NONE,
Allocation.USAGE_SCRIPT);
final Allocation output = Allocation.createTyped(rs, input.getType());
final ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
script.setRadius(radius /* e.g. 3.f */);
script.setInput(input);
script.forEach(output);
output.copyTo(bitmap);
return bitmap;
// Stack Blur v1.0 from
// http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
//
// Java Author: Mario Klingemann <mario at quasimondo.com>
// http://incubator.quasimondo.com
// created Feburary 29, 2004
// Android port : Yahel Bouaziz <yahel at kayenko.com>
// http://www.kayenko.com
// ported april 5th, 2012
// This is a compromise between Gaussian Blur and Box blur
// It creates much better looking blurs than Box Blur, but is
// 7x faster than my Gaussian Blur implementation.
//
// I called it Stack Blur because this describes best how this
// filter works internally: it creates a kind of moving stack
// of colors whilst scanning through the image. Thereby it
// just has to add one new block of color to the right side
// of the stack and remove the leftmost color. The remaining
// colors on the topmost layer of the stack are either added on
// or reduced by one, depending on if they are on the right or
// on the left side of the stack.
//
// If you are using this algorithm in your code please add
// the following line:
//
// Stack Blur Algorithm by Mario Klingemann <mario@quasimondo.com>
Bitmap bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);
if (radius < 1)
return (null);
int w = bitmap.getWidth();
int h = bitmap.getHeight();
int[] pix = new int[w * h];
bitmap.getPixels(pix, 0, w, 0, 0, w, h);
int wm = w - 1;
int hm = h - 1;
int wh = w * h;
int div = radius + radius + 1;
int r[] = new int[wh];
int g[] = new int[wh];
int b[] = new int[wh];
int rsum, gsum, bsum, x, y, i, p, yp, yi, yw;
int vmin[] = new int[Math.max(w, h)];
int divsum = (div + 1) >> 1;
divsum *= divsum;
int dv[] = new int[256 * divsum];
for (i = 0; i < 256 * divsum; i++)
dv[i] = (i / divsum);
yw = yi = 0;
int[][] stack = new int[div][3];
int stackpointer;
int stackstart;
int[] sir;
int rbs;
int r1 = radius + 1;
int routsum, goutsum, boutsum;
int rinsum, ginsum, binsum;
for (y = 0; y < h; y++)
rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
for (i = -radius; i <= radius; i++)
p = pix[yi + Math.min(wm, Math.max(i, 0))];
sir = stack[i + radius];
sir[0] = (p & 0xff0000) >> 16;
sir[1] = (p & 0x00ff00) >> 8;
sir[2] = (p & 0x0000ff);
rbs = r1 - Math.abs(i);
rsum += sir[0] * rbs;
gsum += sir[1] * rbs;
bsum += sir[2] * rbs;
if (i > 0)
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
else
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
stackpointer = radius;
for (x = 0; x < w; x++)
r[yi] = dv[rsum];
g[yi] = dv[gsum];
b[yi] = dv[bsum];
rsum -= routsum;
gsum -= goutsum;
bsum -= boutsum;
stackstart = stackpointer - radius + div;
sir = stack[stackstart % div];
routsum -= sir[0];
goutsum -= sir[1];
boutsum -= sir[2];
if (y == 0)
vmin[x] = Math.min(x + radius + 1, wm);
p = pix[yw + vmin[x]];
sir[0] = (p & 0xff0000) >> 16;
sir[1] = (p & 0x00ff00) >> 8;
sir[2] = (p & 0x0000ff);
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
rsum += rinsum;
gsum += ginsum;
bsum += binsum;
stackpointer = (stackpointer + 1) % div;
sir = stack[(stackpointer) % div];
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
rinsum -= sir[0];
ginsum -= sir[1];
binsum -= sir[2];
yi++;
yw += w;
for (x = 0; x < w; x++)
rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
yp = -radius * w;
for (i = -radius; i <= radius; i++)
yi = Math.max(0, yp) + x;
sir = stack[i + radius];
sir[0] = r[yi];
sir[1] = g[yi];
sir[2] = b[yi];
rbs = r1 - Math.abs(i);
rsum += r[yi] * rbs;
gsum += g[yi] * rbs;
bsum += b[yi] * rbs;
if (i > 0)
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
else
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
if (i < hm)
yp += w;
yi = x;
stackpointer = radius;
for (y = 0; y < h; y++)
// Preserve alpha channel: ( 0xff000000 & pix[yi] )
pix[yi] = (0xff000000 & pix[yi]) | (dv[rsum] << 16) | (dv[gsum] << 8) | dv[bsum];
rsum -= routsum;
gsum -= goutsum;
bsum -= boutsum;
stackstart = stackpointer - radius + div;
sir = stack[stackstart % div];
routsum -= sir[0];
goutsum -= sir[1];
boutsum -= sir[2];
if (x == 0)
vmin[y] = Math.min(y + r1, hm) * w;
p = x + vmin[y];
sir[0] = r[p];
sir[1] = g[p];
sir[2] = b[p];
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
rsum += rinsum;
gsum += ginsum;
bsum += binsum;
stackpointer = (stackpointer + 1) % div;
sir = stack[stackpointer];
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
rinsum -= sir[0];
ginsum -= sir[1];
binsum -= sir[2];
yi += w;
bitmap.setPixels(pix, 0, w, 0, 0, w, h);
return (bitmap);
模糊课程学分转到：MichaelEvans - EtsyBlurExample
第 2 步
现在创建模糊变换：
Transformation blurTransformation = new Transformation()
@Override
public Bitmap transform(Bitmap source)
Bitmap blurred = Blur.fastblur(MainActivity.this, source, 10);
source.recycle();
return blurred;
@Override
public String key()
return "blur()";
;
第 3 步
用毕加索加载图像：
Picasso.with(context)
.load(url) // thumnail url goes here
.transform(blurTransformation)
.into(imageView, new Callback()
@Override
public void onSuccess()
Picasso.with(context)
.load(url) // original image url goes here
.placeholder(imageView.getDrawable())
.into(imageView);
@Override
public void onError()
);
当我启动应用程序时会发生什么情况，它首先显示原始图像但模糊，然后显示显示原始图像。
为了提高效率，我会做的提示是，在将图像上传到 Firebase 存储时，您可以缩小图像的大小并将其与原始图像一起存储（可以使用 Firebase 数据库轻松完成，只需存储缩略图和原图的下载地址），通过 Picasso 加载图片时，可以先加载缩略图，再加载原图。
出于测试目的，我只使用了相同的 Url。
对于重新缩放图像，您会找到一些很好的答案here
这是来自我的示例应用的 GIF：
（来源：giphy.com）
【讨论】：
准确的答案，做得很好，非常感谢！还有一个问题@RamithDR，假设我上传了 2 张图片而不是像你说的那样在我的存储中上传一张，将缩略图 url 带到 .thumbnail(URL) 然后原始图片比拥有相同的图片更容易模糊然后显示，我这样做的原因是因为我只想在用户看到最终结果之前快速加载预览，只是为了加快速度，我不希望他们等到加载图像，因为他们只看到一个空白区域，然后在 2 秒后弹出图像。 @ArmandoBarreda 是的，正如我所说，如果您要上传两张图片作为缩略图和原始图片，请确保在上传之前缩小缩略图的图像大小，然后模糊的缩略图会以非常快的速度向用户显示，并且图像质量是否低并不重要，因为它是模糊的；） 看看这个 [link] (***.com/questions/25629230/…) 如果你转到 json 中的 IMAGE 子项，你可以看到它存储了 3 个不同的图像，low_resolution、thumbnail 和 full_resolution，具有 3 个不同的宽度和高度，然后应用程序只需在完整图像之前调用缩略图，这就是我所指的:) @RamithDR以上是关于Firebase 图像存储 - 缩略图的主要内容，如果未能解决你的问题，请参考以下文章
获取存储在 sd 卡 + android 中的图像的缩略图 Uri/路径