logo标签列表

像 Instagram 一样加载图片

androidinstagraminstagram-api
4
  1. 如果我的图像已经下载了15%，那么它会显示完整的图像，但是所显示的像素模糊不清。
  2. 如果图像已经下载50%，那么它也会显示完整的图像，但是图片或照片的清晰度得到了提高。

因此，在下载完成100%后，图像应该在视觉上变得清晰。

那么，有没有人知道如何在Android中实现这一点呢？

1
您可以使用任何具有“lazyloading”功能的图像下载库。 - Ashwani Kumar
1
@AshwaniKumar 我不是在问懒加载。但如果你看Instagram应用程序，他们如何在ImageView中加载图像。我想要那个功能。 - Prashant Jajal
1
使用多张图片质量不同的版本，例如缩略图、低质量和正常质量。先加载缩略图，这样在正常质量图片加载时仍可显示图片。或者使用“交错”图片。 - Selvin
1
@Selvin，这意味着我需要同时从不同的 URL 加载 3 张图片（缩略图、低清晰度、正常）吗？ - Prashant Jajal
1
@Selvin 我认为“交错”图像可能会有所帮助。谢谢。 - Prashant Jajal
显示剩余3条评论
3个回答
4
首先加载您图像的低质量副本，然后对其进行缩放和模糊效果处理。在高分辨率图片下载期间显示此图像。Facebook写了一篇关于此技术的博客文章，我认为他们也使用相同的技术。
2
Instagram API 提供了 3 种尺寸的 URL，分别是缩略图、低分辨率和标准分辨率。先加载缩略图，然后加载标准分辨率。我已经在 Web 应用程序中完成了相同的操作，但还没有在 Android 上实现。这个方法可行：https://www.picodash.com - krisrak
2
使用Picasso库在项目中加载图片。 链接-http://square.github.io/picasso/ 您想要做的事情可以通过创建图像的BASE64版本，然后在使用Picasso加载图像时将其用作占位符来完成。
示例代码-
picasso.load(finalImage)
       .placeholder(Base64Image)
       .into(imageHolder)

希望这能帮到你。
如何使用Glide实现此功能？ - Woods
1
@Woods 我没有使用过它，所以无法真正帮助你。我更喜欢 Picasso，并且已经使用了几个月了。 - Annsh Singh
没问题，annsh，祝你有美好的一天！ - Woods
0

您可以使用Glide或Fresco库来实现此目的。以下步骤演示如何使用Glide库完成此操作

步骤1：您需要2张图片。第一张图片是原始图片，第二张图片是最大30x30尺寸和2,3kb大小的缩略图。

步骤2：使用以下代码使用Glide加载缩略图并模糊缩略图

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    image = findViewById(R.id.image);



    Glide.with(getApplicationContext()).asBitmap().load("thumbnailURL")
            .listener(new RequestListener<Bitmap>() {
        @Override
        public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Bitmap> target, boolean isFirstResource) {
            Log.d("imageblurness", "onResourceReady: Image Failed");
            return false;
        }

        @Override
        public boolean onResourceReady(Bitmap resource, Object model, Target<Bitmap> target, DataSource dataSource, boolean isFirstResource) {
           Bitmap blurr = fastblur(resource,0.3f,2);
            Drawable d = new BitmapDrawable(getResources(), blurr);

            GlideApp.with(MainActivity.this).load("OriginalImageUrl")
                  .placeholder(d)
                  .into(image);

           return true;
        }
    }).submit();


}

public Bitmap fastblur(Bitmap sentBitmap, float scale, int radius) {

    int width = Math.round(sentBitmap.getWidth() * scale);
    int height = Math.round(sentBitmap.getHeight() * scale);
    sentBitmap = Bitmap.createScaledBitmap(sentBitmap, width, height, false);

    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];
    Log.e("pix", w + " " + h + " " + pix.length);
    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;
        }
    }

    Log.e("pix", w + " " + h + " " + pix.length);
    bitmap.setPixels(pix, 0, w, 0, 0, w, h);

    return (bitmap);
}

在 OnResoursceReady 函数中，我们加载原始图像并使用模糊的缩略图像作为占位符。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接