Using multiple porterduffmodes with bitmap - android

I have a problem trying to achieve particular blending situation:
Create canvas
Draw raw bitmap
Draw rect with color and multiply mode
Draw another rect with color and lighten mode
Following code is working solution with iOS:
+ (UIImage *)compositeBackgroundImageFromImage:(UIImage *)image
{
if (image.size.width < 1 || image.size.height < 1)
return nil;
UIColor *multiplyColor = [UIColor blueColor];
UIColor *lightenColor = [UIColor cyanColor];
UIGraphicsBeginImageContextWithOptions(image.size, YES, [UIScreen mainScreen].scale);
CGContextRef c = UIGraphicsGetCurrentContext();
CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);
[image drawAtPoint:CGPointZero];
CGContextSetFillColorWithColor(c, multiplyColor.CGColor);
CGContextSetBlendMode(c, kCGBlendModeMultiply);
CGContextFillRect(c, rect);
CGContextSetFillColorWithColor(c, lightenColor.CGColor);
CGContextSetBlendMode(c, kCGBlendModeLighten);
CGContextFillRect(c, rect);
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return result;
}
And this is corresponding with Java with Android Universal Image Loader with custom BitmapDisplayer:
.displayer(new BitmapDisplayer() {
#Override
public void display(Bitmap bitmap, ImageAware imageAware,
LoadedFrom loadedFrom) {
int w = bitmap.getWidth();
int h = bitmap.getHeight();
if (w > 0 && h > 0) {
int multiplyColor = // color here
int lightenColor = // color here
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
p.setFilterBitmap(true);
Bitmap bm = Bitmap.createBitmap(w, h,
Config.ARGB_8888);
Canvas c = new Canvas(bm);
c.drawBitmap(bitmap, 0, 0, p);
p.setColorFilter(new PorterDuffColorFilter(
multiplyColor, Mode.MULTIPLY));
c.drawRect(0, 0, w, h, p);
p.setColorFilter(new PorterDuffColorFilter(
lightenColor, Mode.LIGHTEN));
c.drawRect(0, 0, w, h, p);
((ImageView) imageAware.getWrappedView())
.setImageBitmap(bm);
}
}
The result is just a mess far away from iOS.
Thanks.

After couple of different tries ended up using shader to draw 3 rectangles. The visual look seems to be very close, if someone knows if this does exact same than the iOS code that would be nice.
int w = bitmap.getWidth();
int h = bitmap.getHeight();
if (w > 0 && h > 0) {
int multiplyColor = // get color
int lightenColor = // get color
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
BitmapShader shader = new BitmapShader(bitmap,
TileMode.CLAMP, TileMode.CLAMP);
p.setShader(shader);
Bitmap bm = Bitmap.createBitmap(w, h,
Config.ARGB_8888);
Canvas c = new Canvas(bm);
c.drawRect(0, 0, w, h, p);
p.setColorFilter(new PorterDuffColorFilter(
multiplyColor, Mode.MULTIPLY));
c.drawRect(0, 0, w, h, p);
p.setColorFilter(new PorterDuffColorFilter(
lightenColor, Mode.LIGHTEN));
c.drawRect(0, 0, w, h, p);
((ImageView) imageAware.getWrappedView())
.setImageBitmap(bm);
}

Related

How to mask Bitmap with LinearGradient shader properly?

I'm trying to mask Bitmap with gradient alpha at bottom. Gradient size are fixed and independed of Bitmap size. But it draws incorrect: bottom of gradient at top, than top.
What's wrong?
There is sample code:
final int GRADIENT_HEIGHT = 32;
public Bitmap addGradient(Bitmap src) {
int w = src.getWidth();
int h = src.getHeight();
Bitmap overlay = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(overlay);
canvas.drawBitmap(src, 0, 0, null);
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(0, 0, 0, GRADIENT_HEIGHT, 0xFFFFFFFF, 0x00FFFFFF, TileMode.REPEAT);
paint.setShader(shader);
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
canvas.drawRect(0, h - GRADIENT_HEIGHT, w, h, paint);
return overlay;
}
Thanks!
Change your LinearGradient to this:
LinearGradient shader = new LinearGradient(0, h - GRADIENT_HEIGHT, 0, h, 0xFFFFFFFF, 0x00FFFFFF, Shader.TileMode.CLAMP);

thumbnail reflection with Drawable instead of Bitmap

working on generate reflection for thumbnail in recent app menu
the code works very well with CM10 but since update to CM11 (kitkat) they moved to use Drawable instead of Bitmap for reduce memory usage
https://github.com/CyanogenMod/android_frameworks_base/commit/9926272f32868c858b24b45e048210cf3515741e
here should add the changes:
https://github.com/CyanogenMod/android_frameworks_base/blob/1e3c4a9e687b19cd7837fed51eb25e92a4f691c1/packages/SystemUI/src/com/android/systemui/recent/RecentsPanelView.java#L509
here my code:
final int reflectionGap = 4;
int width = thumbnail.getWidth();
int height = thumbnail.getHeight();
Matrix matrix = new Matrix();
matrix.preScale(1, -1);
Bitmap reflectionImage = Bitmap.createBitmap(thumbnail, 0, height * 2 / 3, width, height/3, matrix, false);
Bitmap bitmapWithReflection = Bitmap.createBitmap(width, (height + height/3), Config.ARGB_8888);
Canvas canvas = new Canvas(bitmapWithReflection);
canvas.drawBitmap(thumbnail, 0, 0, null);
Paint defaultPaint = new Paint();
canvas.drawRect(0, height, width, height + reflectionGap, defaultPaint);
canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(0, thumbnail.getHeight(), 0,
bitmapWithReflection.getHeight() + reflectionGap, 0x70ffffff, 0x00ffffff,
TileMode.CLAMP);
paint.setShader(shader);
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
canvas.drawRect(0, height, width,
bitmapWithReflection.getHeight() + reflectionGap, paint);
h.thumbnailViewImage.setImageBitmap(bitmapWithReflection);
my question is :
how i can make this code works with Drawable instead of Bitmap
thanks
try this:
Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher);
int w = drawable.getIntrinsicWidth();
int h = drawable.getIntrinsicHeight();
drawable.setBounds(0, 0, w, h);
Bitmap b = Bitmap.createBitmap(w, h, Config.ARGB_8888);
Canvas c = new Canvas(b);
c.translate(0, h);
c.scale(1, -1);
drawable.draw(c);
// test it
ImageView iv = new ImageView(this);
iv.setImageBitmap(b);
setContentView(iv);

Bitmap size exceed VM budget

I have read those posts on this issue but my case is abit different as I am NOT DISPLAYING the bitmap but just post-processing the image from raw data.
First, I call ImageProcessing.rgbToBitmap(data,width, height); which will return a Bitmap object. Then I perform these 3 functions SEPARATELY.
Rotate Bitmap
Add a watermark overlay to Bitmap
Add date at lower right hand corner of Bitmap
All 3 methods called will create an return a Bitmap object which probably causes the crash as I am trying to save an image every 1000ms! Sometimes the images saved are distorted probably due to the memory error.
I am posting my codes below and any advices are greatly appreciated. I do not want to compromise on the quality on the image taken though. (Need to preserve the resolution)
public static Bitmap addWatermark(Resources res, Bitmap source) {
int w, h;
Canvas c;
Paint paint;
Bitmap bmp, watermark;
Matrix matrix;
float scale;
RectF r;
w = source.getWidth();
h = source.getHeight();
// Create the new bitmap
bmp = Bitmap.createBitmap(w, h, Bitmap.Config.RGB_565);
paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG
| Paint.FILTER_BITMAP_FLAG);
// Copy the original bitmap into the new one
c = new Canvas(bmp);
c.drawBitmap(source, 0, 0, paint);
// Load the watermark
watermark = BitmapFactory.decodeResource(res, R.drawable.watermark);
// Scale the watermark to be approximately 10% of the source image
// height
scale = (float) (((float) h * 0.80) / (float) watermark.getHeight());
// Create the matrix
matrix = new Matrix();
matrix.postScale(scale, scale);
// Determine the post-scaled size of the watermark
r = new RectF(0, 0, watermark.getWidth(), watermark.getHeight());
matrix.mapRect(r);
// Center watermark
matrix.postTranslate((w - r.width()) / 2, (h - r.height()) / 2);
// Draw the watermark
c.drawBitmap(watermark, matrix, paint);
// Free up the bitmap memory
watermark.recycle();
return bmp;
}
public static Bitmap addDate(Bitmap src, String date) {
int w = src.getWidth();
int h = src.getHeight();
//Bitmap result = Bitmap.createBitmap(w, h, src.getConfig());
Bitmap result = src;
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0, 0, null);
Paint paint = new Paint();
paint.setColor(Color.rgb(255, 185, 15));
paint.setTextSize(20);
paint.setAntiAlias(true);
canvas.drawText(date, w - 200, h - 20, paint);
return result;
}
public static Bitmap rotate(Bitmap src, int rotation) {
int width = src.getWidth();
int height = src.getHeight();
// create a matrix for the manipulation
Matrix matrix = new Matrix();
// rotate the Bitmap
matrix.postRotate(rotation);
// recreate the new Bitmap, swap width and height and apply
// transform
Bitmap rotatedBitmap = Bitmap.createBitmap(src, 0, 0, width, height,
matrix, true);
return rotatedBitmap;
}
Try this first:
Change
// Copy the original bitmap into the new one
c = new Canvas(bmp);
c.drawBitmap(source, 0, 0, paint);
with
// Copy the original bitmap into the new one
c = new Canvas(bmp);
bmp.recycle(); //here or below
c.drawBitmap(source, 0, 0, paint);
//below bmp.recycle();
and here:
canvas.drawText(date, w - 200, h - 20, paint);
return result;
with
canvas.drawText(date, w - 200, h - 20, paint);
result.recycle();
return result;
and here
Bitmap rotatedBitmap = Bitmap.createBitmap(src, 0, 0, width, height,
matrix, true);
return rotatedBitmap;
with
Bitmap rotatedBitmap = Bitmap.createBitmap(src, 0, 0, width, height,
matrix, true);
return rotatedBitmap;
rotatedBitmap.recycle();
Add all this (recycle();) maybe this is already enough and also try the code with smaller bitmaps, en see if it still crashes (like 50px by 50px).
And no, their is no way to increase the VM of your phone.

How can i have image (takePicture) with text at the bottom of it. Eg. Date time

I would like to add the text to be part of my image. Eg. Date and time, or "You are using the Free version". Is it possible....? Please help me. Thanks in advance.
Use a Canvas and drawText.
Thanks Gabriel for the right direction: Following code helped me.
public static Bitmap WaterMark(Bitmap src, String watermark,int x, int y, int size) {
int w = src.getWidth();
int h = src.getHeight();
// TML_Library.Debug("Image Width = "+w+" Image Height = "+h);
Bitmap result = Bitmap.createBitmap(w, h, src.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0, 0, null);
Paint paint = new Paint();
paint.setTextSize(size);
paint.setColor(Color.rgb(255, 0, 0));
paint.setAntiAlias(true);
canvas.drawText(watermark, x, y, paint);
return result;
}

How to change Bitmap image color in android?

I am developing an android application in which I set an image to imageview. Now programmatic I want to change the bitmap image color. Suppose my image have red color initially and now I need to change it to orange color. How can I do that? Please help.
Here is my code. I managed to change the opacity but I do not know how to change the color.
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView iv = (ImageView) findViewById(R.id.img);
Drawable d = getResources().getDrawable(R.drawable.pic1);
Bitmap mNewBitmap = ((BitmapDrawable)d).getBitmap();
Bitmap nNewBitmap = adjustOpacity(mNewBitmap);
iv.setImageBitmap(nNewBitmap);
}
private Bitmap adjustOpacity( Bitmap bitmap ) {
int width = bitmap.getWidth();
int height = bitmap.getHeight();
Bitmap dest = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
int[] pixels = new int[width * height];
bitmap.getPixels(pixels, 0, width, 0, 0, width, height);
dest.setPixels(pixels, 0, width, 0, 0, width, height);
return dest;
}
I tried Josip's answer but wouldn't work for me, regardless of whether the offset parameter was 1 or 0 - the drawn bitmap just appeared in original colour.
However, this did work:
// You have to copy the bitmap as any bitmaps loaded as drawables are immutable
Bitmap bm = ImageLoader.getInstance().loadImageSync("drawable://" + drawableId, o)
.copy(Bitmap.Config.ARGB_8888, true);
Paint paint = new Paint();
ColorFilter filter = new PorterDuffColorFilter(ContextCompat.getColor(this, R.color.COLOR_1_DARK), PorterDuff.Mode.SRC_IN);
paint.setColorFilter(filter);
Canvas canvas = new Canvas(bm);
canvas.drawBitmap(bm, 0, 0, paint);
Update 1
Whilst the above works well and is useful in a lot of cases, if you just want to change the main colour of an ImageView drawable, which the op did, you can just use:
imgView.setColorFilter(ContextCompat.getColor(this, R.color.COLOR_1_DARK));
If you need more flexibility or this doesn't give the desired effect, there's an overload that allows you to change the PorterDuff Mode until you get what you're after:
imgView.setColorFilter(ContextCompat.getColor(this, R.color.COLOR_1_DARK), PorterDuff.Mode.SRC_ATOP);
Update 2
Another good use case I've had for this lately is customizing the appearance of a Google map v2 marker icon. In order to use 2 graphics to allow (for example) small/large icons on a marker, but also a range of colours on those 2 graphics by changing the colour of them dynamically. In my case I was doing this inside a ClusterRenderer as the markers were also clustered, but this can be used with a regular map marker the same way:
#Override
protected void onBeforeClusterItemRendered(MyClusterItem item, MarkerOptions markerOptions) {
try {
int markerColor = item.getColor();
Bitmap icon;
if (item.isFeatured()) {
// We must copy the bitmap or we get an exception "Immutable bitmap passed to Canvas constructor"
icon = BitmapFactory.decodeResource(context.getResources(),
R.drawable.icon_marker_large).copy(Bitmap.Config.ARGB_8888, true);
} else {
// We must copy the bitmap or we get an exception "Immutable bitmap passed to Canvas constructor"
icon = BitmapFactory.decodeResource(context.getResources(),
R.drawable.icon_marker_small).copy(Bitmap.Config.ARGB_8888, true);
}
Paint paint = new Paint();
ColorFilter filter = new PorterDuffColorFilter(ContextCompat.getColor(context, markerColor), PorterDuff.Mode.SRC_IN);
paint.setColorFilter(filter);
Canvas canvas = new Canvas(icon);
canvas.drawBitmap(icon, 0, 0, paint);
markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon));
} catch (Exception ex) {
ex.printStackTrace();
}
}
I got kind of solution.
Bitmap sourceBitmap = BitmapFactory.decodeFile(imgPath);
float[] colorTransform = {
0, 1f, 0, 0, 0,
0, 0, 0f, 0, 0,
0, 0, 0, 0f, 0,
0, 0, 0, 1f, 0};
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.setSaturation(0f); //Remove Colour
colorMatrix.set(colorTransform); //Apply the Red
ColorMatrixColorFilter colorFilter = new ColorMatrixColorFilter(colorMatrix);
Paint paint = new Paint();
paint.setColorFilter(colorFilter);
Display display = getWindowManager().getDefaultDisplay();
Bitmap resultBitmap = Bitmap.createBitmap(sourceBitmap, 0, (int)(display.getHeight() * 0.15), display.getWidth(), (int)(display.getHeight() * 0.75));
image.setImageBitmap(resultBitmap);
Canvas canvas = new Canvas(resultBitmap);
canvas.drawBitmap(resultBitmap, 0, 0, paint);
private void changeColor(){
ImageView image = (ImageView) findViewById(R.id.imageView1);
Bitmap sourceBitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.ic_launcher);
changeBitmapColor(sourceBitmap, image, Color.BLUE);
}
private void changeBitmapColor(Bitmap sourceBitmap, ImageView image, int color) {
Bitmap resultBitmap = Bitmap.createBitmap(sourceBitmap, 0, 0,
sourceBitmap.getWidth() - 1, sourceBitmap.getHeight() - 1);
Paint p = new Paint();
ColorFilter filter = new LightingColorFilter(color, 1);
p.setColorFilter(filter);
image.setImageBitmap(resultBitmap);
Canvas canvas = new Canvas(resultBitmap);
canvas.drawBitmap(resultBitmap, 0, 0, p);
}
It's better obtain mutable bitmap by copy, without changing size:
public static Bitmap changeBitmapColor(Bitmap sourceBitmap, int color)
{
Bitmap resultBitmap = sourceBitmap.copy(sourceBitmap.getConfig(),true);
Paint paint = new Paint();
ColorFilter filter = new LightingColorFilter(color, 1);
paint.setColorFilter(filter);
Canvas canvas = new Canvas(resultBitmap);
canvas.drawBitmap(resultBitmap, 0, 0, paint);
return resultBitmap;
}
public Bitmap replaceColor(Bitmap src,int fromColor, int targetColor) {
if(src == null) {
return null;
}
// Source image size
int width = src.getWidth();
int height = src.getHeight();
int[] pixels = new int[width * height];
//get pixels
src.getPixels(pixels, 0, width, 0, 0, width, height);
for(int x = 0; x < pixels.length; ++x) {
pixels[x] = (pixels[x] == fromColor) ? targetColor : pixels[x];
}
// create result bitmap output
Bitmap result = Bitmap.createBitmap(width, height, src.getConfig());
//set pixels
result.setPixels(pixels, 0, width, 0, 0, width, height);
return result;
}
The simplest way to change the bitmaps color is with this method:
bitmap.eraseColor(ContextCompat.getColor(this, R.color.your_color));
If you want to overlay the ImageView with color use:
imageView.setColorFilter(ContextCompat.getColor(this, R.color.your_color));
A little off topic, but considering you only want to display in changed color here is my solution. Namely, the easiest and fast way is just applying a filter by using drawColor() method on Canvas, right after drawBitmap():
m_canvas.drawColor(Color.RED, PorterDuff.Mode.ADD);
Sources: https://developer.android.com/reference/android/graphics/PorterDuff.Mode.html
Even if bitmap is immutable, it will work.
Paint paint = new Paint();
ColorFilter filter = new PorterDuffColorFilter(ContextCompat.getColor(context, R.color.whatColorNeed), PorterDuff.Mode.SRC_IN);
paint.setColorFilter(filter);
canvas.drawBitmap(bitmapToModify, some_x, some_y, paint);
I have solved the problem by using the below code
public void changeColor(Bitmap srcImage) {
Bitmap bmpRedscale = Bitmap.createBitmap(srcImage.getWidth(),
srcImage.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmpRedscale);
Paint paint = new Paint();
ColorMatrix cm = new ColorMatrix();
cm.setRGB2YUV();
paint.setColorFilter(new ColorMatrixColorFilter(cm));
canvas.drawBitmap(srcImage, 0, 0, paint);
mImgEdited.setImageBitmap(bmpRedscale);
}
In Kotlin :
private fun changeBitmapColor(oldBitmap: Bitmap, newColor: Int): Bitmap {
val paint = Paint()
val filter: ColorFilter = PorterDuffColorFilter(
newColor,
PorterDuff.Mode.SRC_IN
)
paint.colorFilter = filter
val canvas = Canvas(oldBitmap)
canvas.drawBitmap(oldBitmap, 0f, 0f, paint)
return oldBitmap
}
This function PorterDuff.Mode.SRC_IN can change due to the Bitmap file, look this link https://developer.android.com/reference/android/graphics/PorterDuff.Mode

Categories

Resources