How to blur image using Picasso?

Question

I want to blur my image after downloading using picasso. I actually find a library that maybe can add blur effect to my Image: https://github.com/wasabeef/picasso-transformations

And here is the code I use:

 Picasso.get()
            .load(currentEvent.posterDownloadPath)
            .transform(BlurTransformation(25,3))
            .into(recommendedEventViewHolder.blurryImageView)

But unfortunately I have error:

I have tried several ways, but I still can't get the correct way to use blur effect of this library. could you please help me to add blur effect? Maybe you have different way (not using this library)?

Java is ok.

Answer 1

Picasso

For Using Picasso, follow these steps:

Step 1

Add this depencencies to Gradle:

repositories {
    jcenter()
}

dependencies {
    compile 'jp.wasabeef:picasso-transformations:2.2.1'
    // If you want to use the GPU Filters
    compile 'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.4.1'
}

Step 2

Set Picasso Transform:

Picasso.get()
       .load(currentEvent.posterDownloadPath)
       .transform(new BlurTransformation(mContext, 25, 1))
       .into(recommendedEventViewHolder.blurryImageView);

in kotlin like this:

Picasso.get()
           .load(currentEvent.posterDownloadPath)
           .transform(BlurTransformation(mContext, 25, 1))
           .into(recommendedEventViewHolder.blurryImageView)

Also you can use Blurry. Blurry is an easy blur library for Android. But I suggest Fresco. Fresco is a powerful system for displaying images in Android applications.

Fresco

For Using Fresco, follow these steps:

Step 1: Create Android Project and add fresco library dependency on build.gradle of module and sync project.

dependencies {
implementation 'com.facebook.fresco:fresco:1.13.0'
implementation 'jp.wasabeef:fresco-processors:2.1.0'
}

Step 2: Initialize fresco inside your onCreate() method of MainActivity.java or Application.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //initialize fresco
    Fresco.initialize(this);
    setContentView(R.layout.activity_main);

}

Step 3: Inside your activity_main.xml add SimpleDraweeView which is provided by Fresco Library.

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/sdv_image"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:src="@mipmap/ic_launcher" />

Step 4: Before writing code for blurring image you have to take care of three major classes.

i.Postprocessor: -Define quality for blurriness for your image.

ii.ImageRequest: -Create request for controller using instance of Postprocessor.

iii.PipelineDraweeController: -Prepare controller for view using instance of ImageRequest and SimpleDraweeView.

Step5: Inside your main activity class create an instance of BlurPostprocessor with context and radius, where radius refers to percentage of blurness of your image.

Postprocessor postprocessor = new BlurPostprocessor(this,50);

Step6: ImageRequest class Build image request with blur property hold by instance of Postprocessor.

 ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithSource(Uri.parse("image url"))
        .setPostprocessor(postprocessor)
        .build();

Step7: Create new instance of PipelineDraweeController using imagerequest and old simpleDraweeView.

controller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder()
        .setImageRequest(imageRequest)
        .setOldController(simpleDraweeView.getController())
        .build();

Step 8: Pass controller to simpleDraweeView.

simpleDraweeView.setController(controller);

That’s all, now build and run the application.

Enjoy that :)

Answer 2

This code works for me: Both transforms are from the wasabeef lib

 SketchFilterTransformation transformation  = new SketchFilterTransformation(this);

 BlurTransformation transformation1 = new BlurTransformation(this);

 Picasso.get()
        .load(mImageUri)
        .transform(transformation)
        .transform(transformation1)
        .rotate(decodeRotation(orientation))
        .into((ImageView) findViewById(R.id.image));

The URI is the data of a file picker.

I have this in my Build gradle:

 implementation 'com.squareup.picasso:picasso:2.71828'
 implementation 'jp.wasabeef:picasso-transformations:2.2.1'
 // If you want to use the GPU Filters
 implementation 'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.4.1'