Crop white spaces from images

Question

I have a service that download images and uses picasso to show it in a CardView.

Picasso.with(context).load(beer.getLabelLarge()).fit().centerCrop().into(imgBeerLabel);

But these images comes involved with an undesirable white space:

I want to trim these images and show only the label, without the white border, and resizing it to ImageView dimensions.

-- EDIT

The white part has variable size.

The problem is the same as reported in this question:

https://stackoverflow.com/questions/12175991/crop-image-white-space-automatically-using-jquery

But there it was solved with a lot of code, which I would like to avoid at this time.

One possible solution that would help me would be to focus on a specific square within the image and zoom in on that part, making it fill the entire screen, regardless of the size of the white part.

The result expected is:

Is there a way to do this using Picasso and Transformations?

do you know the label width and height. You can use transformations to crop to required size — Raghunandan, Dec 01 '17 at 02:53
Maybe you can try something like the answer on https://stackoverflow.com/questions/12175991/crop-image-white-space-automatically-using-jquery — Anthony Jones, Dec 01 '17 at 02:57
@AnthonyJones The problem is the same, but I thought there might be a less programmatic solution. — alexpfx, Dec 01 '17 at 12:22
May this will be helpful https://stackoverflow.com/questions/43281758/crop-image-as-square-with-picasso — Suraj Nair, Dec 01 '17 at 13:54

alexpfx · Answer 1 · 2017-12-03T13:33:43.903

I end up creating a new Transform implementation based on code found in this library.

It looks for the first different pixel in both sides, in the vertical and horizontal, and crops the bitmap from there. It's not perfect, but it suits my needs.

public class CropMiddleFirstPixelTransformation implements Transformation {
    private int mWidth;
    private int mHeight;


    @Override
    public Bitmap transform(Bitmap source) {
        int width = source.getWidth();
        int height = source.getHeight();

        int[] horizontalMiddleArray = new int[width];
        source.getPixels(horizontalMiddleArray, 0, width, 0, height / 2, width, 1);

        int[] verticalMiddleArray = new int[height];
        source.getPixels(verticalMiddleArray, 0, 1, width / 2, 0, 1, height);

        int left = getFirstNonWhitePosition(horizontalMiddleArray);
        int right = getLastNonWhitePosition(horizontalMiddleArray);

        int top = getFirstNonWhitePosition(verticalMiddleArray);
        int bottom = getLastNonWhitePosition(verticalMiddleArray);

        mWidth = right - left;
        mHeight = bottom - top;


        if (!isNegative(left, right, top, bottom)) {
            return source;
        }

        Bitmap bitmap = Bitmap.createBitmap(source, left, top, mWidth , mHeight);
        source.recycle();
        return bitmap;

    }

    private boolean isNegative(int... values) {
        for (int i : values) {
            if (i < 0) {
                return false;
            }
        }
        return true;

    }

    private int getFirstNonWhitePosition(int[] horizontalMiddleArray) {
        int left = 0;
        for (int i = 0; i < horizontalMiddleArray.length; i++) {
            if (i == 0) {
                left = horizontalMiddleArray[i];
            }
            if (left != horizontalMiddleArray[i]) {
                return i;
            }
        }
        return -1;
    }

    private int getLastNonWhitePosition(int[] horizontalMiddleArray) {
        int right = 0;
        int length = horizontalMiddleArray.length;
        for (int i = length - 1; i > 0; i--) {
            if (i == length - 1) {
                right = horizontalMiddleArray[i];
            }
            if (right != horizontalMiddleArray[i]) {
                return i;
            }
        }
        return -1;
    }


    @Override
    public String key() {
        return "CropMiddleFirstPixelTransformation(width=" + mWidth + ", height=" + mHeight + ")";
    }
}

It looks like your isNegative method returns true if all of the values are positive. Is this intended? I believe that this may also crop images unexpectedly if there is a legitimate white pixel on the outside of the image such as in the orange and white Kronos logo. — Thomas Sunderland, Sep 27 '19 at 20:38

score 1 · Answer 2 · answered Dec 01 '17 at 04:30

1

Use concept of Vector Image or Nine Patch image.Url is given below

For Vector Image :- https://developer.android.com/studio/write/vector-asset-studio.html

For ninePatch image https://developer.android.com/studio/write/draw9patch.html

answered Dec 01 '17 at 04:30

Rajaneesh Singh

11
2

I don't understand how this might be used in a dynamic way. can you provide more information? – alexpfx Dec 01 '17 at 12:23

Crop white spaces from images

2 Answers2