I have an image, and I am trying to overlay a cropped version of the image over the original. Something like this:
Original
Overlay Image
Image after the overlay image is cropped to roughly 50%
Right now, my code below reverses what I want, and returns an image like this:
public void setOverlay(ImageView image, Bitmap originalBitmap, double percentageCompleted) {
int percentHeight;
int height = originalBitmap.getHeight();
Bitmap cropped;
if(percentageCompleted == 0){
cropped = Bitmap.createBitmap(overlay, 0, 0, overlay.getWidth() , 0 );
} else {
percentHeight = (int) Math.floor(height * (percentageCompleted));
Log.d("HEIGHT", Double.toString(height));
Log.d("PERCENT Completed", Double.toString(percentageCompleted));
Log.d("PERCENT HEIGHT", Integer.toString(percentHeight));
cropped = Bitmap.createBitmap(overlay, 0, 0, overlay.getWidth() , height-percentHeight);
}
originalBitmap = overlay(originalBitmap, cropped);
//set imageview to new bitmap
image.setImageBitmap(originalBitmap );
}
public Bitmap overlay(Bitmap bmp1, Bitmap bmp2) {
Bitmap bmp3 = bmp1.copy(Bitmap.Config.ARGB_8888,true);//mutable copy
Canvas canvas = new Canvas(bmp3 );
canvas.drawBitmap(bmp2, new Matrix(), null);
return bmp3;
}
I know I could reverse the image files, but I want to start with the original image and have the overlay draw upwards, rather than starting with the overlay, and drawing the original downwards. Any help is appreciated!
You can use this method:
Canvas.drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)
Here is my overlay method that may meet your need:
public static Bitmap overlay(Bitmap base, Bitmap overlay, Float percentage) {
Bitmap resultBitmap = Bitmap.createBitmap(base.getWidth(), base.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(resultBitmap);
Paint paint = new Paint();
// base bitmap
canvas.drawBitmap(base, 0F, 0F, paint);
// overlay bitmap
int yOffset = (int) (percentage * base.getHeight());
Rect rect = new Rect(0, yOffset, overlay.getWidth(), overlay.getHeight());
canvas.drawBitmap(overlay, rect, rect, paint);
return resultBitmap;
}
Related
I'm trying to cut a circle into semicircles using android canvas. The circle is loaded using Bitmap class.
Here's the example:
I've been looking for any solution, especially the ones which enable you to crop a bitmap using coordinates, but to no avail.
Any help is appreciated, thanks before..
I had the same challenge before and I solved it in a simple way, The main idea is simple! Use a Bitmap mask, Fill the pixel you want to save (in this case a pie) with the highest integer value (0xFFFFFFFF), So you can use a bitwiseAND to gain the result color, Other pixels of the mask Bitmap will be a transparent black color (0x00000000), When you're done with the mask, Create the result Bitmap and fill the pixels as the method below does:
public Bitmap applyPieMask(Bitmap src, float startAngle, float sweepAngle) {
int width = src.getWidth();
int height = src.getHeight();
//create bitmap mask with the same dimension of the src bitmap
Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(mask);
canvas.drawColor(0x00000000);//fill mask bitmap with transparent black!
//init mask paint
Paint maskPaint = new Paint();
maskPaint.setColor(0xFFFFFFFF);//pick highest value for bitwise AND operation
maskPaint.setAntiAlias(true);
//choose entire bitmap as a rect
RectF rect = new RectF(0, 0, width, height);
canvas.drawArc(rect, startAngle, sweepAngle, true, maskPaint);//mask the pie
Bitmap result = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
for (int i = 0; i < height; i++) {
for (int j = 0; j < width; j++) {
//combine src color and mask to gain the result color
int color = mask.getPixel(i, j) & src.getPixel(i, j);
result.setPixel(i, j, color);
}
}
return result;
}
And here we go ...
public void doIt(View view) {
ImageView imageView = (ImageView) findViewById(R.id.iv);
Bitmap src = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(src);
canvas.drawColor(Color.BLUE);//fill src bitmap with blue color
imageView.setImageBitmap(applyPieMask(src, -90, 60));
}
Hope you find it helpful
I am trying to add an image watermark to another image. I have the following code but I'm facing a problem. I don't know what this 'Resources res' is.
Can anyone help?
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();
bmp = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG |Paint.FILTER_BITMAP_FLAG);
c = new Canvas(bmp);
c.drawBitmap(source, 0, 0, paint);
watermark = BitmapFactory.decodeResource(res, R.drawable.android_mo);
scale = (float) (((float) h * 0.10) / (float) watermark.getHeight());
matrix = new Matrix();
matrix.postScale(scale, scale);
r = new RectF(0, 0, watermark.getWidth(), watermark.getHeight());
matrix.mapRect(r);
matrix.postTranslate(w - r.width(), h - r.height());
c.drawBitmap(watermark, matrix, paint);
watermark.recycle();
return bmp;
}
It's the Resource object you can have through activity.getResources() or fragment.getResources()
Resources res
is the resource object that you need to pass from the calling Activity/Fragment.
suppose, if the method is in Utility class then invoke the method as
//Add watermark to the selected image
Bitmap markedBitmap = Utility.addWatermark(context.getResources(), bitmap);
Main bitmap is bmp1 and bmp2 transparante bitmap :
public static Bitmap overlay(Bitmap bmp1, Bitmap bmp2) {
Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), bmp1.getConfig());
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(bmp1, new Matrix(), null);
canvas.drawBitmap(bmp2, 0, 0, null);
return bmOverlay;
}
I'm having problems while trying to rotate a picture with java android canvas.drawImage. I'm doing a little game, and I'm painting different pictures on the screen using my drawImage function. However now I want to rotate some little images, I have created a function called drawMirroredImage for this. However now this little images don't appear on the same place.
Here is my code:
public void drawImage(Image Image, int x, int y) {
canvas.drawBitmap(((AndroidImage) Image).bitmap, x, y, null);
}
public void drawMirroredImage(Image Image, int x, int y) {
canvas.save();
canvas.scale(-1.0f, 1.0f);
canvas.drawBitmap(((AndroidImage) Image).bitmap, x - canvas.getWidth(), y, null);
canvas.restore();
}
Anyone knows what I'm doing wrong?
Lot of thanks for helping
Following will work for you.
I found it somewhere on SO itself but don't remember where.
public static Bitmap getReflectionedBitmap(Context context,int resourceId,Bitmap originalImage,int reflectionGap) {
if(originalImage==null)
originalImage = BitmapFactory.decodeResource(context.getResources(),resourceId);
int width = originalImage.getWidth();
int height = originalImage.getHeight();
// This will not scale but will flip on the Y axis
Matrix matrix = new Matrix();
matrix.preScale(1, -1);
// Create a Bitmap with the flip matix applied to it.
// We only want the bottom half of the image
Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
height / 2, width, height / 2, matrix, false);
// Create a new bitmap with same width but taller to fit reflection
Bitmap bitmapWithReflection = Bitmap.createBitmap(width,
(height + height / 2), Config.ARGB_8888);
// Create a new Canvas with the bitmap that's big enough for
// the image plus gap plus reflection
Canvas canvas = new Canvas(bitmapWithReflection);
// Draw in the original image
canvas.drawBitmap(originalImage, 0, 0, null);
// Draw in the gap
Paint deafaultPaint = new Paint();
deafaultPaint.setColor(0xffffffff);
canvas.drawRect(0, height, width, height + reflectionGap , deafaultPaint);
canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(0,
originalImage.getHeight(), 0, bitmapWithReflection.getHeight()
+ reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);
// Set the paint to use this shader (linear gradient)
paint.setShader(shader);
// Set the Transfer mode to be porter duff and destination in
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()
+ reflectionGap, paint);
return bitmapWithReflection;
}
I tweaked the snippet a little bit to use it with resource images as well.
Pass in null as parameter in place of Bitmap if you want to create reflection for images in resource.
I'm trying to round corners of a bitmap using this code below. The problem is that no matter what I set the paint's color to, e.g. Color.TRANSPARENT , it is always black. How can I actually clip the corners of a bitmap, not just color them black?
Thanks!
public static Bitmap roundCorners(Bitmap src, int radius) {
//Create a *mutable* location, and a canvas to draw into it
int width = src.getWidth();
int height = src.getHeight();
Bitmap result = Bitmap.createBitmap(width, height, Config.ARGB_8888);
Canvas canvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
RectF rect = new RectF(0, 0, width, height);
Shader bitmapShader = new BitmapShader(src, TileMode.CLAMP, TileMode.CLAMP);
paint.setColor(0xFF000000);
paint.setShader(bitmapShader);
canvas.drawRoundRect(rect, radius, radius, paint);
return result;
}
There's an easier method that works in one pass. Just draw a rounded rect but set a BitmapShader on the Paint. This will fill the rounded rect with your bitmap. No need to change the xfermode or to call drawBitmap.
How to set all white the 10 rows on the left side of a Bitmap?
I'v got a Bitmap that has to be padded on the left side. I thought i can create a new image iterate on the old one getpixel for each position and setpixel on the new one (white or colored) than return the new bitmap...is this wrong?
Any suggestion? thanks a lot!
You can instead create a new Bitmap with the extra padding number of pixels.
Set this as the canvas bitmap and Color the entire image with the required color and then copy your bitmap.
public Bitmap pad(Bitmap Src, int padding_x, int padding_y) {
Bitmap outputimage = Bitmap.createBitmap(Src.getWidth() + padding_x,Src.getHeight() + padding_y, Bitmap.Config.ARGB_8888);
Canvas can = new Canvas(outputimage);
can.drawARGB(FF,FF,FF,FF); //This represents White color
can.drawBitmap(Src, padding_x, padding_y, null);
return outputimage;
}
public Bitmap addPaddingTopForBitmap(Bitmap bitmap, int paddingTop) {
Bitmap outputBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight() + paddingTop, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(outputBitmap);
canvas.drawColor(Color.RED);
canvas.drawBitmap(bitmap, 0, paddingTop, null);
return outputBitmap;
}
public Bitmap addPaddingBottomForBitmap(Bitmap bitmap, int paddingBottom) {
Bitmap outputBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight() + paddingBottom, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(outputBitmap);
canvas.drawColor(Color.RED);
canvas.drawBitmap(bitmap, 0, 0, null);
return outputBitmap;
}
public Bitmap addPaddingRightForBitmap(Bitmap bitmap, int paddingRight) {
Bitmap outputBitmap = Bitmap.createBitmap(bitmap.getWidth() + paddingRight, bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(outputBitmap);
canvas.drawColor(Color.RED);
canvas.drawBitmap(bitmap, 0, 0, null);
return outputBitmap;
}
public Bitmap addPaddingLeftForBitmap(Bitmap bitmap, int paddingLeft) {
Bitmap outputBitmap = Bitmap.createBitmap(bitmap.getWidth() + paddingLeft, bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(outputBitmap);
canvas.drawColor(Color.RED);
canvas.drawBitmap(bitmap, paddingLeft, 0, null);
return outputBitmap;
}
Here's a kotlin extension function with RxJava to get it done. I haven't tested completely but based combined the previous answers to get something
fun Bitmap.pad(top: Float = 0F, bottom: Float = 0F, left: Float = 0F, right: Float = 0F): Single<Bitmap> {
return Single.create<Bitmap> { emitter ->
val output = Bitmap.createBitmap(
(width + left + right).toInt(),
(height + top + bottom).toInt(),
Bitmap.Config.ARGB_8888
)
val canvas = Canvas(output)
canvas.drawBitmap(this, left, top, null)
emitter.onSuccess(output)
}.subscribeOn(Schedulers.computation())
}
I think the coroutine version would simply be
suspend fun Bitmap.pad(top: Float = 0F, bottom: Float = 0F, left: Float = 0F, right: Float = 0F): Bitmap {
val output = Bitmap.createBitmap(
(width + left + right).toInt(),
(height + top + bottom).toInt(),
Bitmap.Config.ARGB_8888
)
val canvas = Canvas(output)
canvas.drawBitmap(this, left, top, null)
return output
}
I just did this to give padding from all side. Hope it will help someone.
Combination of https://stackoverflow.com/a/44060669/6480433 & https://stackoverflow.com/a/6957333/6480433 these answer.
Bitmap outputimage = Bitmap.createBitmap(Src.getWidth() + padding_x,Src.getHeight() + padding_y, Bitmap.Config.ARGB_8888);
Canvas can = new Canvas(outputimage);
can.drawBitmap(Src, padding_x, padding_y, null);
Bitmap output = Bitmap.createBitmap(outputimage.getWidth()+padding_x, outputimage.getHeight() + padding_y, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
canvas.drawBitmap(outputimage, 0, 0, null);
return output;
You might want to look here:
http://download.oracle.com/javase/1.4.2/docs/api/java/awt/image/BufferedImage.html
methods you might want to use are: getHeight() then you know how many pixels to set and iterate over 10 columns
and setRGB (int x, int y, int RGB) to set the pixel