Android: Compressing images creates black borders on left and top margin

Question

I'm using this compression class from the following site: http://voidcanvas.com/whatsapp-like-image-compression-in-android/

Here is my compression class with very little modifications from the original class:

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.media.ExifInterface;

import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;

import timber.log.Timber;

//http://voidcanvas.com/whatsapp-like-image-compression-in-android/
public class ImageCompressor {

    public ImageCompressor() {}

    public static String compressImage(String imagePath, Context context) {
        Bitmap scaledBitmap = null;
        String filename = "compressed_" +imagePath.substring(imagePath.lastIndexOf("/")+1);

        BitmapFactory.Options options = new BitmapFactory.Options();

//      by setting this field as true, the actual bitmap pixels are not loaded in the memory. Just the bounds are loaded. If
//      you try the use the bitmap here, you will get null.
        options.inJustDecodeBounds = true;
        Timber.e( "imagePath "+imagePath);
        Timber.e("filename "+filename);
        Bitmap bmp = BitmapFactory.decodeFile(imagePath, options);
        if (options == null) {
            Timber.e("zero bitmap");
        }
        int actualHeight = options.outHeight;
        int actualWidth = options.outWidth;
        float imgRatio = actualWidth / actualHeight;

        float maxHeight = actualHeight * 10/20;
        float maxWidth = actualWidth * 10/20;
        float maxRatio = maxWidth / maxHeight;

//      width and height values are set maintaining the aspect ratio of the image

        if (actualHeight > maxHeight || actualWidth > maxWidth) {
            if (imgRatio < maxRatio) {

                imgRatio = maxHeight / actualHeight;
                actualWidth = (int) (imgRatio * actualWidth);
                actualHeight = (int) maxHeight;

            } else if (imgRatio > maxRatio) {

                imgRatio = maxWidth / actualWidth;
                actualHeight = (int) (imgRatio * actualHeight);
                actualWidth = (int) maxWidth;

            } else {

                actualHeight = (int) maxHeight;
                actualWidth = (int) maxWidth;

            }
        }

//      setting inSampleSize value allows to load a scaled down version of the original image

        options.inSampleSize = calculateInSampleSize(options, actualWidth, actualHeight);

//      inJustDecodeBounds set to false to load the actual bitmap
        options.inJustDecodeBounds = false;

//      this options allow android to claim the bitmap memory if it runs low on memory
        options.inPurgeable = true;
        options.inInputShareable = true;
        options.inTempStorage = new byte[16 * 1024];

        try {
//          load the bitmap from its path
            bmp = BitmapFactory.decodeFile(imagePath, options);
        } catch (OutOfMemoryError exception) {
            exception.printStackTrace();

        }
        try {
            scaledBitmap = Bitmap.createBitmap(actualWidth, actualHeight, Bitmap.Config.ARGB_8888);
        } catch (OutOfMemoryError exception) {
            exception.printStackTrace();
        }

        float ratioX = actualWidth / (float) options.outWidth;
        float ratioY = actualHeight / (float) options.outHeight;
        float middleX = actualWidth / 2.0f;
        float middleY = actualHeight / 2.0f;

        Matrix scaleMatrix = new Matrix();
        scaleMatrix.setScale(ratioX, ratioY, middleX, middleY);

        Canvas canvas = new Canvas(scaledBitmap);
        canvas.setMatrix(scaleMatrix);
        canvas.drawBitmap(bmp, middleX - bmp.getWidth() / 2, middleY - bmp.getHeight() / 2, new Paint(Paint.FILTER_BITMAP_FLAG));

//      check the rotation of the image and display it properly
        ExifInterface exif;
        try {
            exif = new ExifInterface(imagePath);

            int orientation = exif.getAttributeInt(
                    ExifInterface.TAG_ORIENTATION, 0);
            Timber.e("Exif: " + orientation);
            Matrix matrix = new Matrix();
            if (orientation == 6) {
                matrix.postRotate(90);
                Timber.e( "Exif: " + orientation);
            } else if (orientation == 3) {
                matrix.postRotate(180);
                Timber.e( "Exif: " + orientation);
            } else if (orientation == 8) {
                matrix.postRotate(270);
                Timber.e( "Exif: " + orientation);
            }
            scaledBitmap = Bitmap.createBitmap(scaledBitmap, 0, 0,
                    scaledBitmap.getWidth(), scaledBitmap.getHeight(), matrix,
                    true);
        } catch (IOException e) {
            e.printStackTrace();
        } catch (NullPointerException e) {
            e.printStackTrace();
        }

        FileOutputStream out = null;

        try {

            out = context.openFileOutput(filename, Context.MODE_PRIVATE);
            scaledBitmap.compress(Bitmap.CompressFormat.JPEG, 90, out);

            out.close();

        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
            return filename;
        }

    public static int calculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight) {
        final int height = options.outHeight;
        final int width = options.outWidth;
        int inSampleSize = 1;
        if (height > reqHeight || width > reqWidth) {
            final int heightRatio = Math.round((float) height/ (float) reqHeight);
            final int widthRatio = Math.round((float) width / (float) reqWidth);
            inSampleSize = heightRatio < widthRatio ? heightRatio : widthRatio;      }
        final float totalPixels = width * height;
        final float totalReqPixelsCap = reqWidth * reqHeight * 2;
        while (totalPixels / (inSampleSize * inSampleSize) > totalReqPixelsCap) {
            inSampleSize++;
        }
        return inSampleSize;
    }

}
}

This is my original image:

This is my compressed image:

I don't understand why the compressed image has a black outline on the top and left hand side of the image. It only seems to happen with low res images; if it was a photo from a cellphone camera, this will tend to not happen as that is a high res image. If it was a low res photo from the internet, this will happen.

Does anyone know how I can fix this?

EDIT:

To test this, you can download the demo project here or create your own: http://www.voidcanvas.com/projects/1951EfficientImageLoading.zip You will need to navigate in your phone or emulator browser to a photo from Google Images and try to compress it. The result looks like the below, you can see the black borders appearing on the left and right sides:

Answer 1

I believe the problem comes from this line:

canvas.drawBitmap(bmp, middleX - bmp.getWidth() / 2, middleY - bmp.getHeight() / 2, new Paint(Paint.FILTER_BITMAP_FLAG));

You're losing the precision by dividing by the integer 2.

try something like this:

 canvas.drawBitmap(bmp, middleX - (float)bmp.getWidth() / 2.0f, middleY - (float)bmp.getHeight() / 2.0f, new Paint(Paint.FILTER_BITMAP_FLAG));