在下载整个图像之前显示模糊缩略图(如在Whatsapp中)?

时间:2014-05-23 04:56:27

标签: android image

我想在Whatsapp上获得同样漂亮的UI效果。每当我收到一些图像时,无论其大小如何,我都可以在1秒内看到模糊的缩略图,并在其上显示正在下载真实图像的指示。

他们是如何做到的?当用户从我们的服务器下载图像时,我想达到同样的效果。我不确定他们是否正在进行某些服务器端图像处理,或者Android SDK中有内置功能可以执行此操作。

假设用户请求4MB的图像。他几乎立即点击下载,图像的模糊缩略图将出现在屏幕上并下载状态指示器。我主要感兴趣的是如何快速地进行图像预览,在1秒钟内完成(感觉就像是瞬间)。

PS。当您尝试上传图像时,类似的效果具有StackOverflow。当您将其拖动到上传弹出窗口时,您几乎可以立即看到它的预览。我想Stackoverflow通过使用客户端脚本执行此操作,我们无法在Android应用程序中应用。但这是我需要的一个很好的展示(如果你不使用Whatsapp)。

3 个答案:

答案 0 :(得分:13)

基本上在这些情况下发生的是你需要从服务器请求一个模糊的缩略图(通常非常小,以便快速下载),然后开始下载完整的图像。这是必须由服务器完成的事情。

更新: 您现在可以使用渐进式jpeg等技术来实现相同的效果,而无需服务器存储两个单独的图像。渐进式jpegs基本上在图像的第一个字节中编码非常低质量的图像,然后随着图像继续加载,质量提高。这可能不是您正在寻找的确切效果,但它应该能够在加载全尺寸图像时显示快速低质量预览。目前,在Android上加载这些内容的唯一方法是使用Facebook's Fresco library

答案 1 :(得分:6)

我有另一种理论。我认为这里使用的方法是在发布消息之前,他们有一些算法来生成轻量级模糊低质量图片(在发送者中),然后发送该数组的内容(几个字节作为byte []数组可能沿着已发布的消息...现在,一旦接收者收到消息,他就可以立即显示该模糊图像并通过向服务器发出完整请求来获取完整图像。是什么让我觉得这是他们要请求的来自服务器的缩略图然后为什么没有详细的缩略图?它的尺寸也可以很小。为什么有一个模糊的缩略图,它只是原始的缩略图,而不像我们在网上看到的缩略图那样完整。

答案 2 :(得分:0)

  

我相信这个过程有两个部分

  1. 首先是从api服务器加载的消息部分,它将具有消息的文本内容和非常小/模糊的图像(图像的Base64编码的字符串)以及实际视频的URL。例子

    {message:"嗨,这是我上传的视频..",缩略图:" .. base64字符串图片",网址:" .. .url到带有键的视频文件或没有"}

  2. 第二个是媒体部分,它是在用户点击下载按钮后看到来自网址的预览图像的消息后启动的。

  3.   

    在上传邮件时,我们也可以这样做   生成缩略图/模糊图像并分两部分提交消息

    • 首先将包含缩略图的消息上传到api服务器并获取媒体服务器的密钥
    • 使用api服务器提供的密钥将视频提交到媒体服务器。

      internal storage
    • 首先将消息上传到api服务器并获取媒体服务器的密钥

    • 使用api服务器提供的密钥将视频提交到媒体服务器并让 服务器生成视频缩略图。

    我相信我们正在运行两个独立的服务器,用于处理静态内容,另一个用于api调用。

    希望大家都同意我的观点或建议任何更正。