在毕加索加载实际图像之前模糊缩略图

Question

我正在使用 picasso 显示来自 URL 的图像，我在加载实际图像之前先显示缩略图，我想模糊该缩略图，我如何在 picasso 中实现？

这是我的源代码

pb.setVisibility(View.GONE);
        Picasso.with(getApplicationContext())
                .load(thumbUrl) // thumbnail url goes here
                //.placeholder(R.drawable.progress_animation)
                .resize(width, width)
                .transform(new BlurTransformation(getApplicationContext(), 25, 1))
                .into(imageview, new Callback()
                {
                    @Override
                    public void onSuccess()
                    {
                        pb.setVisibility(View.GONE);
                        Log.e(TAG,"OnSuccess");
                        Picasso.with(getApplicationContext())
                                .load(url) // image url goes here
                                .resize(width, width)
                                .placeholder(imageview.getDrawable())
                                .into(imageview);
                        iv_reDownload.setVisibility(View.GONE);
                    }

                    @Override
                    public void onError()
                    {
                        pb.setVisibility(View.GONE);
                        Log.e(TAG,"OnError");
                        Picasso.with(getApplicationContext())
                                .load(url) // image url goes here
                                .resize(width, width)
                                .placeholder(imageview.getDrawable())
                                .into(imageview);
                        iv_reDownload.setVisibility(View.VISIBLE);
                    }
                });

Answer 1

不确定这是否有效，但我之前看到您可以使用：

.add(new ImageTransform(IMAGE_URL, new BlurTransformation(this)));

Answer 2

据我所知，毕加索目前不支持此 "feature"。 Glide 库，其用法非常相似，确实有一个功能可以轻松使用 "fast preview"，即低分辨率缩略图，加载速度比全尺寸图像快。

函数是 thumbnail(float) 并接受比例因子作为参数，例如 0.1f 是原始图像大小的十分之一。

Glide 的案例使用可能是这样的。

Glide.with(mFragment)
            .load(wFile.getUriForThumb())                
            .override(length, length)
            .thumbnail(.05f)
            .placeholder(R.drawable.placeholder_image_128px)
            .into(holder.mImageThumb);

其中方法 override 与 Picasso 中的 resize(int,int) 非常接近。

要完整比较两个库，您可以查看这个不错的指南：Glide vs. Picasso

Answer 3

最后，我借助名为 picasso-transformations 的 Library 解决了我的问题，我在我的项目中添加了以下依赖项

compile 'jp.wasabeef:picasso-transformations:2.2.1'

不仅支持Picasso，还支持Glide或Fresco 我在毕加索里面调用了 BlurTransformation class。

这里是完整的例子

pb.setVisibility(View.GONE);
        Picasso.with(getApplicationContext())
                .load(thumbUrl) // thumbnail url goes here
                //.placeholder(R.drawable.progress_animation)
                .resize(width, width)
                .transform(new BlurTransformation(getApplicationContext(), 25, 1))
                .into(imageview, new Callback()
                {
                    @Override
                    public void onSuccess()
                    {
                        pb.setVisibility(View.GONE);
                        Log.e(TAG,"OnSuccess");
                        Picasso.with(getApplicationContext())
                                .load(url) // image url goes here
                                .resize(width, width)
                                .placeholder(imageview.getDrawable())
                                .into(imageview);
                        iv_reDownload.setVisibility(View.GONE);
                    }

                    @Override
                    public void onError()
                    {
                        pb.setVisibility(View.GONE);
                        Log.e(TAG,"OnError");
                        Picasso.with(getApplicationContext())
                                .load(url) // image url goes here
                                .resize(width, width)
                                .placeholder(imageview.getDrawable())
                                .into(imageview);
                        iv_reDownload.setVisibility(View.VISIBLE);
                    }
                });

Answer 4

Picasso 中的模糊变换，参考：https://futurestud.io/tutorials/picasso-image-rotation-and-transformation

 @Override
        public Bitmap transform(Bitmap bitmap) {
            // Create another bitmap that will hold the results of the filter.
            Bitmap blurredBitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true);

        // Allocate memory for Renderscript to work with
        Allocation input = Allocation.createFromBitmap(rs, blurredBitmap, Allocation.MipmapControl.MIPMAP_FULL, Allocation.USAGE_SHARED);
        Allocation output = Allocation.createTyped(rs, input.getType());

        // Load up an instance of the specific script that we want to use.
        ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
        script.setInput(input);

        // Set the blur radius
        script.setRadius(10);

        // Start the ScriptIntrinisicBlur
        script.forEach(output);

        // Copy the output to the blurred bitmap
        output.copyTo(blurredBitmap);

        bitmap.recycle();

        return blurredBitmap;
    }

Answer 5

我已经测试了 Glide 和 Picasso 的快速加载，如果你在 Picasso 中调整你的图像大小，它会提高你的加载速度，这里是代码

 Glide.with(context)
           .load(sArr.get(position).getThumbnail())
           .thumbnail(0.01f)
           .override(100,100)
           .centerCrop()
           .placeholder(R.drawable.default_picture)
           .into(holder.imgItem);

Piccaso 代码

Picasso.with(context)
            .load(sArr.get(position).getThumbnail())
            .resize(100,100)
            .placeholder(R.drawable.default_picture)
            .into(holder.imgItem);

and Picasso win !!

在毕加索加载实际图像之前模糊缩略图

Blur thumbnail image before loading actual image in picasso

android

imageview

picasso

Picasso 中的模糊变换，参考：https://futurestud.io/tutorials/picasso-image-rotation-and-transformation