Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Glide Transformation of GIF Image #507

Closed
ixsans opened this issue Jun 24, 2015 · 3 comments
Closed

Glide Transformation of GIF Image #507

ixsans opened this issue Jun 24, 2015 · 3 comments
Labels

Comments

@ixsans
Copy link

ixsans commented Jun 24, 2015

I have a problem when try to load GIF image into an ImageView with a Circle Transformation.
If I load GIF image without transformation, the image is loaded without any problem and the GIF animation works. But, when I try to perform Circle Transformation to the image, the animation work, but the transformation (circle crop) doesn't work.

This is the GIF image:
8f20a5f825b0ef5396f766bc9c185485_128x128

And this is what I want (Image is crooped, but also it should be run):

img

I observed that the Circle Transformation is performed before GIF image frame fully loaded so the image become circle. But when it has loaded, the image become square again.

here is my code:

  Glide.with(context)
                .load(imageURL)
                .placeholder(R.drawable.default_avatar)
                .transform(new CircleTransform(context))
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(imageView);

CircleTransform

public class CircleTransform extends BitmapTransformation {
    public CircleTransform(Context context) {
        super(context);
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return circleCrop(pool, toTransform);
    }

    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

        int size = Math.min(source.getWidth(), source.getHeight());
        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        // TODO this could be acquired from the pool too
        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);

        Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        }

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);


        int borderWidth = 3;
        int borderColor = 0xffffffff;

        final Paint paint2 = new Paint();
        paint2.setAntiAlias(true);
        paint2.setColor(borderColor);
        paint2.setStrokeWidth(borderWidth);
        paint2.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(source.getWidth() / 2, source.getHeight() / 2, (float) (source.getWidth() / 2 - Math.ceil(borderWidth / 2)), paint2);

        return result;
    }

    @Override
    public String getId() {
        return getClass().getName();
    }
}
@sjudd sjudd added the bug label Jun 24, 2015
@sjudd
Copy link
Collaborator

sjudd commented Jun 24, 2015

I can reproduce this as well, definitely a bug. I'll look in to doing a dot release to fix this, thanks for the report!

sjudd added a commit to sjudd/glide that referenced this issue Jun 24, 2015
@sjudd
Copy link
Collaborator

sjudd commented Jun 24, 2015

Should be fixed here: 5884d2d

See the Snapshots wiki if you want to try out the fix (you want 3.7.0-SNAPSHOT)

@sjudd sjudd closed this as completed Jun 24, 2015
@wasabeef
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants