How to merge 2 bitmap with config ALPHA_8 in android? - android

If I load a bitmap with ALPHA_8 it will create an bitmap with the a greyscale and transparancy. This is exactly what I want.
BitmapFactory.Options options = new BitmapFactory.Options();
options.inPreferredConfig = Bitmap.Config.ALPHA_8;
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test_bitmap, options);
I want to merge two bitmaps. To do so I create a canvas with ALPHA_8 and draw the same bitmap on the canvas.
But the result is different. It will keep the alpha, but everything what was grey will be black. So I see only the contours and no greyscale.
resultBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ALPHA_8);
resultCanvas = new Canvas(resultBitmap);
resultCanvas.drawBitmap(bitmap, 0, 0, null);
I found 2 workarounds.
A) Use ARGB_8888 instead of ALPHA_8, but this will result in a far larger image.
resultBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
B) Use a color matrix to convert the image to alpha channel, but this will result in the grey to be semi transparant, instead of a grey scale.
float[] matrix = new float[] {
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
-1f, 0, 0, 1f, 0};
Paint grayToAlpha = new Paint();
grayToAlpha.setColorFilter(new ColorMatrixColorFilter(new ColorMatrix(matrix)));
resultCanvas.drawBitmap(bitmap, 0, 0, grayToAlpha);
Both workarounds are not perfect. So my question is:
Is there a way to get the same result with the canvas as with the bitmap?
Or
Is there a better way of merging two bitmaps with ALPHA_8 together?

Related

Fit image inside png Image (Frame)

I have a png image which I want to use as a frame for images in ImageView.
Sorry, it's white that's why invisible
Like this but with sides curved
What is the solution?
I've tried by converting png to patch 9, setting background of parent and source of image view, but none worked. Image doesn't fit inside.
I've done it using PorterDuff. Designed an extra image just with curved border and applied PorterDuff.Mode.SRC_OVER inside setImageResource of Custom Image View.
Here is the overriden function
#Override
public void setImageResource(int resId) {
Bitmap rawBmp = BitmapFactory.decodeResource(getContext().getResources(), resId);
Bitmap rawMask = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.image_frame_arc_filled);
Bitmap rawBorderMask = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.image_frame_arc);
Bitmap bmp = Bitmap.createScaledBitmap(rawBmp, rawBmp.getWidth(), rawBmp.getHeight(), true);
Bitmap mask = Bitmap.createScaledBitmap(rawMask, bmp.getWidth(), bmp.getHeight(), true);
Bitmap borderMask = Bitmap.createScaledBitmap(rawBorderMask, mask.getWidth(), mask.getHeight(), true);
Bitmap bitmap = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawBitmap(bmp, 0, 0, null);
Paint maskPaint = new Paint();
maskPaint.setXfermode(
new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawBitmap(mask, 0, 0, maskPaint);
maskPaint = new Paint();
maskPaint.setXfermode(
new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));
canvas.drawBitmap(borderMask, 0, 0, maskPaint);
this.setImageBitmap(bitmap);
}

Stretch Rectangle and Fit Text on Multiple Lines in Canvas

I'm currently drawing a rectangle under a bitmap using the Canvas in Android. I am using the following code
BitmapFactory.Options options = new BitmapFactory.Options();
options.inPreferredConfig = Bitmap.Config.ARGB_8888;
Bitmap bitmap = BitmapFactory.decodeFile(file.getPath(), options);
Bitmap b = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight() + 100, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
c.drawBitmap(bitmap, 0, 0, null);
Paint myPaint = new Paint();
myPaint.setColor(Color.rgb(0, 0, 0));
myPaint.setStrokeWidth(10);
Rect r = new Rect(0, bitmap.getHeight(), bitmap.getWidth(), bitmap.getHeight() + 100);
c.drawRect(r, myPaint);
Paint textPaint = new Paint();
textPaint.setTextSize(20);
textPaint.setColor(Color.WHITE);
textPaint.setTextAlign(Paint.Align.CENTER);
int width = r.width();
int numOfChars = textPaint.breakText(description,true,width,null);
int start = (altText.length()-numOfChars)/2;
c.drawText(description,start,start+numOfChars,r.exactCenterX(),r.exactCenterY(),textPaint);
iv.setImageBitmap(b);
The bitmap draws fine and the rectangle draws directly below it. The text draws centered inside the rectangle. My issue is that the text (which varies in length) draws outside the rectangle. What I would like to happen is have the text skip to a new line when it reaches the end of the rectangle (which is the same width as the bitmap)
This a xkcd comic reader, the alt text is the text I am trying to fit in the rectangle, the image is the comic itself which varies in width (and height)

How to mask only certain parts of a bitmap in Android

I want to be able to use the following image to mask other bitmap. So basically, I'm trying to get the mask image and replace it's black content with another bitmap. Like this for example:
I'm able to use this mask and create a round version of the original bitmap, but that does not retain that orange border around it. Any thoughts on how I can accomplish this effect? Thanks.
The code that I am using (that only creates a round image) is the following:
private static Bitmap applyMask(ImageView imageView, Bitmap mainImage) {
Canvas canvas = new Canvas();
Bitmap result result = Bitmap.createBitmap(50, 50, Bitmap.Config.ARGB_8888);
canvas.setBitmap(result);
Paint paint = new Paint();
// resize image fills the whole canvas
canvas.drawBitmap(mainImage, null, new Rect(0, 0, 50, 50), paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawBitmap(sMaskImage, 0, 0, paint);
paint.setXfermode(null);
return result;
}
I use below code snipped to set masked images, this sample "bm" is my bitmap and "mMaskSource" is the resource id of mask object position in my drawable folder.
Bitmap mask = BitmapFactory.decodeResource(getResources(), mMaskSource);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(),
Config.ARGB_8888);
Canvas mCanvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
bm = Bitmap.createScaledBitmap(bm, mask.getWidth(), mask.getHeight(),
true);
mCanvas.drawBitmap(bm, 0, 0, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
And finally you can use "result" bitmap object however you wish.

How can I set the alpha of a bitmap pre-setHasAlpha?

I have a Bitmap and I need to set some of its pixels to transparent. Although I'm creating the Bitmap with Config.ARGB_8888, when I call Bitmap.hasAlpha() on it, it returns false. I can't use Bitmap.setHasAlpha() because that was only added in API level 12 whereas my minimum supported API needs to be 9. How can I do this?
Here you go:
Paint paint = new Paint();
paint.setAlpha(100);
canvas.drawBitmap(bitmap, src, dst, paint);
How to change a bitmap's opacity?
Edit:
//Create an array of pixels of the bitmap using Bitmap getPixels function
//Traverse through the pixels array and if that pixel matches your condition to change it to transparent
// Change the color of that pixel to transparent using Color.Transparent
//Finally set them back using Bitmap setPixels function
Example code:
import android.graphics.Color;
int[] pixels = new int[myBitmap.getHeight()*myBitmap.getWidth()];
myBitmap.getPixels(pixels, 0, myBitmap.getWidth(), 0, 0, myBitmap.getWidth(), myBitmap.getHeight());
//traverse through pixel array and if condition is met
pixels[i] = Color.TRANSPARENT;
myBitmap.setPixels(pixels, 0, myBitmap.getWidth(), 0, 0, myBitmap.getWidth(), myBitmap.getHeight());
how to change the color of certain pixels in bitmap android
// Convert red to transparent in a bitmap
public static Bitmap makeAlpha(Bitmap bit) {
int width = bit.getWidth();
int height = bit.getHeight();
Bitmap myBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
int [] allpixels = new int [ myBitmap.getHeight()*myBitmap.getWidth()];
bit.getPixels(allpixels, 0, myBitmap.getWidth(), 0, 0, myBitmap.getWidth(),myBitmap.getHeight());
myBitmap.setPixels(allpixels, 0, width, 0, 0, width, height);
return myBitmap;
}
The above code is equivalent to setHasAlpha. Give it a Bitmap, and it will return a Bitmap where HasAlpha is true, and will therefore be able to have transparency. This works in API level 8. I have not tested it in anything lower.

draw circle on bitmap

i've written an app that captures a picture and saves it on the sdcard. i then can load that image into an imageview to display it. i'd like to draw a circle on the bitmap before i display it. the code below displays the bitmap but no circle, any ideas why the circle is not there?
thanks.
BitmapFactory.Options bfo = new BitmapFactory.Options();
bfo.inSampleSize = 5;
Bitmap bm = BitmapFactory.decodeByteArray(imageArray, 0, imageArray.length, bfo);
Log.e(TAG, bm.toString());
//imageview.setImageBitmap(bm);
Bitmap bmOverlay = Bitmap.createBitmap(bm.getWidth(), bm.getHeight(), bm.getConfig());
canvas = new Canvas(bmOverlay);
Paint paint = new Paint();
paint.setColor(Color.RED);
canvas.drawBitmap(bm, new Matrix(), null);
canvas.drawCircle(750, 14, 11, paint);
imageview.setImageBitmap(bmOverlay);
You might check bm.getWidth. If you are using a sample size of 5 then your image will be 5 times smaller than the original, causing your circle to disappear off the right side of the image.
You could try:
paint.setStrokeWidth(10);
canvas.drawCircle(50, 50, 25);
just as a sanity check.

Categories

Resources