I have a motion JPEG stream that is put on a canvas in Android. My problem is that at the bottom right of the canvas there is a little, gray, pixelated bar. It kinda of disappears and re-appears. I don't have this issue on other platforms that use the same stream, so i'm guessing its an Android problem. Here is my code:
Canvas canvas = null;
try
{
Bitmap bmp = BitmapFactory.decodeByteArray(notifi.imgData, 0, notifi.imgData.length);
if (bmp == null)
System.out.println("Skipping invalid MJpeg frame");
else
{
canvas = holder.lockCanvas(null);
if (canvas == null)
{
System.out.println("Cannot lock canvas, skipping MJpeg frame");
return;
}
canvas.drawColor(Color.BLACK);
Rect dst = null;
int viewWidth = mPreview.getWidth();
int viewHeight = mPreview.getHeight();
float ratio = bmp.getWidth() / (float)bmp.getHeight();
int desiredHeight = (int)(viewWidth / ratio);
if (desiredHeight > viewHeight)
{ // Letterbox
int maxWidth = (int)(viewHeight * ratio);
int pad = (viewWidth - maxWidth) / 2;
dst = new Rect(pad, 0, maxWidth + pad, viewHeight);
}
else
{
int pad = (viewHeight - desiredHeight) / 2;
dst = new Rect(0, pad, viewWidth, desiredHeight + pad);
}
canvas.drawBitmap(bmp, null, dst, null);
}
} finally {
if (canvas != null)
holder.unlockCanvasAndPost(canvas);
}
}
});
canvas = holder.lockCanvas(null); looks suspect.
Try canvas = holder.lockCanvas(); instead.
I notice that you are adding a "Pad" to the destination rectangle to change it's height.
If you do that, I wonder if the destination rectangle size will match the size of the image you are drawing and thus "over draw" some gray bar as you are seeing. Just a guess - maybe if you remove the height pad it will go away? Just a guess.
dst = new Rect(0, pad, viewWidth, desiredHeight + pad);
canvas.drawBitmap(bmp, null, dst, null);
Related
So I am using this library https://github.com/uptechteam/MotionViews-Android/ for creating bitmaps, which can be resized and dragged around just like snapchat/instagram stickers. But the problem is that the bitmaps that are generated are not smooth and have rough edges like this:
As you can see the text are somewhat distorted and the background has rough edges. Here is the code for generating the bitmap:
/**
* If reuseBmp is not null, and size of the new bitmap matches the size of the reuseBmp,
* new bitmap won't be created, reuseBmp it will be reused instead
*
* #param textLayer text to draw
* #param reuseBmp the bitmap that will be reused
* #return bitmap with the text
*/
#NonNull
private Bitmap createBitmap(#NonNull TextLayer textLayer, #Nullable Bitmap reuseBmp) {
int boundsWidth = canvasWidth;
int alignment = textLayer.getFont().getAlignment();
int style = textLayer.getFont().getStyle();
// init params - size, color, typeface
if (style == STYLE_UNDERLINE) {
textPaint.setFlags(Paint.UNDERLINE_TEXT_FLAG);
} else {
textPaint.setFlags(0);
}
textPaint.setAntiAlias(true);
textPaint.setDither(false);
textPaint.setElegantTextHeight(true);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setTextSize(textLayer.getFont().getSize() * canvasWidth);
textPaint.setColor(textLayer.getFont().getColor());
textPaint.setTypeface(fontProvider.getTypeface(textLayer.getFont().getTypeface()));
textBackgroundColor = textLayer.getFont().getBackgroundColor();
// drawing text guide : http://ivankocijan.xyz/android-drawing-multiline-text-on-canvas/
// Static layout which will be drawn on canvas
Layout.Alignment layoutAlignment;
if (alignment == ALIGNMENT_LEFT) {
layoutAlignment = Layout.Alignment.ALIGN_NORMAL;
} else if (alignment == ALIGNMENT_RIGHT) {
layoutAlignment = Layout.Alignment.ALIGN_OPPOSITE;
} else {
layoutAlignment = Layout.Alignment.ALIGN_CENTER;
}
StaticLayout sl;
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) {
sl = new StaticLayout(
textLayer.getText(), // - text which will be drawn
textPaint,
boundsWidth, // - width of the layout
layoutAlignment, // - layout alignment
1, // 1 - text spacing multiply
1, // 1 - text spacing add
true); // true - include padding
} else {
StaticLayout.Builder builder = StaticLayout.Builder.obtain(textLayer.getText(), 0, textLayer.getText().length(), textPaint, boundsWidth)
.setAlignment(layoutAlignment)
.setLineSpacing(1, 1)
.setIncludePad(true);
sl = builder.build();
}
// calculate height for the entity, min - Limits.MIN_BITMAP_HEIGHT
int boundsHeight = sl.getHeight();
// create bitmap not smaller than TextLayer.Limits.MIN_BITMAP_HEIGHT
int bmpHeight = (int) (canvasHeight * Math.max(TextLayer.Limits.MIN_BITMAP_HEIGHT,
1.0F * boundsHeight / canvasHeight));
// create bitmap where text will be drawn
Bitmap bmp;
if (reuseBmp != null && reuseBmp.getWidth() == boundsWidth
&& reuseBmp.getHeight() == bmpHeight) {
// if previous bitmap exists, and it's width/height is the same - reuse it
bmp = reuseBmp;
bmp.eraseColor(Color.TRANSPARENT); // erase color when reusing
} else {
bmp = Bitmap.createBitmap(boundsWidth, bmpHeight, Bitmap.Config.ARGB_8888);
}
Canvas canvas = new Canvas(bmp);
final Rect rect = new Rect(0, 0, bmp.getWidth(), bmp.getHeight());
final RectF rectF = new RectF(rect);
final Paint textBackgroundPaint = new Paint();
textBackgroundPaint.setFlags(Paint.FILTER_BITMAP_FLAG | Paint.ANTI_ALIAS_FLAG);
textBackgroundPaint.setDither(false);
textBackgroundPaint.setColor(textBackgroundColor);
textBackgroundPaint.setStyle(Paint.Style.FILL_AND_STROKE);
textBackgroundPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
canvas.drawRoundRect(rectF, textBackgroundRadius, textBackgroundRadius, textBackgroundPaint);
canvas.drawBitmap(bmp, rect, rect, textBackgroundPaint);
canvas.save();
// move text to center if bitmap is bigger that text
if (boundsHeight < bmpHeight) {
//calculate Y coordinate - In this case we want to draw the text in the
//center of the canvas so we move Y coordinate to center.
float textYCoordinate = (float) (bmpHeight - boundsHeight) / 2;
canvas.translate(0, textYCoordinate);
}
//draws static layout on canvas
sl.draw(canvas);
canvas.restore();
return bmp;
}
I tried using antialias, filterbitmap on the paint but it does nothing. Also tried setting the view's layer type to layer_type_software but the result is the same. How to fix this? Any help would be appreciated.
Please use below code for removing rough edges from bitmap
canvas.drawBitmap(bitmap, x, y, new Paint(Paint.ANTI_ALIAS_FLAG));
use the Paint.ANTI_ALIAS_FLAG flag, this flag is used for removing the jagged edges and smooth the edges
I'm trying to draw some text on bitmap with a fixed position (Bottom left corner) no matter how bitmap size different.
Code below works but, the Text is drawn on the center of the bitmap
public Bitmap drawTextToBitmap(Context gContext,
Bitmap bitmap,
String gText) {
Resources resources = gContext.getResources();
float scale = resources.getDisplayMetrics().density;
android.graphics.Bitmap.Config bitmapConfig =
bitmap.getConfig();
if (bitmapConfig == null) {
bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;
}
bitmap = bitmap.copy(bitmapConfig, true);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(getResources().getColor(R.color.fujiColor));
paint.setTypeface(Typeface.createFromAsset(getAssets(), "fonts/DS-DIGI.TTF"));
paint.setTextSize((int) (14 * scale));
paint.setShadowLayer(1f, 0f, 1f, getResources().getColor(R.color.fujiShadowColor));
Rect bounds = new Rect();
paint.getTextBounds(gText, 0, gText.length(), bounds);
int x = (bitmap.getWidth() - bounds.width()) / 2;
int y = (bitmap.getHeight() + bounds.height()) / 2;
canvas.drawText(gText, x, y, paint);
return bitmap;
}
What I need is something similar to this :
Thank you.
As mentioned in the official docs, the text is drawn taking the (x,y) values as origin. Change the x,y values. Something along the following lines should work.
int horizontalSpacing = 24;
int verticalSpacing = 36;
int x = horizontalSpacing;//(bitmap.getWidth() - bounds.width()) / 2;
int y = bitmap.getHeight()-verticalSpacing;//(bitmap.getHeight() + bounds.height()) / 2;
I have bitmaps which are squares or rectangles. I take the shortest side and do something like this:
int value = 0;
if (bitmap.getHeight() <= bitmap.getWidth()) {
value = bitmap.getHeight();
} else {
value = bitmap.getWidth();
}
Bitmap finalBitmap = null;
finalBitmap = Bitmap.createBitmap(bitmap, 0, 0, value, value);
Then I scale it to a 144 x 144 Bitmap using this:
Bitmap lastBitmap = null;
lastBitmap = Bitmap.createScaledBitmap(finalBitmap, 144, 144, true);
Problem is that it crops the top left corner of the original bitmap, Anyone has the code to crop the center of the bitmap?
This can be achieved with: Bitmap.createBitmap(source, x, y, width, height)
if (srcBmp.getWidth() >= srcBmp.getHeight()){
dstBmp = Bitmap.createBitmap(
srcBmp,
srcBmp.getWidth()/2 - srcBmp.getHeight()/2,
0,
srcBmp.getHeight(),
srcBmp.getHeight()
);
}else{
dstBmp = Bitmap.createBitmap(
srcBmp,
0,
srcBmp.getHeight()/2 - srcBmp.getWidth()/2,
srcBmp.getWidth(),
srcBmp.getWidth()
);
}
While most of the above answers provide a way to do this, there is already a built-in way to accomplish this and it's 1 line of code (ThumbnailUtils.extractThumbnail())
int dimension = getSquareCropDimensionForBitmap(bitmap);
bitmap = ThumbnailUtils.extractThumbnail(bitmap, dimension, dimension);
...
//I added this method because people keep asking how
//to calculate the dimensions of the bitmap...see comments below
public int getSquareCropDimensionForBitmap(Bitmap bitmap)
{
//use the smallest dimension of the image to crop to
return Math.min(bitmap.getWidth(), bitmap.getHeight());
}
If you want the bitmap object to be recycled, you can pass options that make it so:
bitmap = ThumbnailUtils.extractThumbnail(bitmap, dimension, dimension, ThumbnailUtils.OPTIONS_RECYCLE_INPUT);
From: ThumbnailUtils Documentation
public static Bitmap extractThumbnail (Bitmap source, int width, int
height)
Added in API level 8 Creates a centered bitmap of the desired size.
Parameters source original bitmap source width targeted width
height targeted height
I was getting out of memory errors sometimes when using the accepted answer, and using ThumbnailUtils resolved those issues for me. Plus, this is much cleaner and more reusable.
Have you considered doing this from the layout.xml ? You could set for your ImageView the ScaleType to android:scaleType="centerCrop" and set the dimensions of the image in the ImageView inside the layout.xml.
You can used following code that can solve your problem.
Matrix matrix = new Matrix();
matrix.postScale(0.5f, 0.5f);
Bitmap croppedBitmap = Bitmap.createBitmap(bitmapOriginal, 100, 100,100, 100, matrix, true);
Above method do postScalling of image before cropping, so you can get best result with cropped image without getting OOM error.
For more detail you can refer this blog
Here a more complete snippet that crops out the center of an [bitmap] of arbitrary dimensions and scales the result to your desired [IMAGE_SIZE]. So you will always get a [croppedBitmap] scaled square of the image center with a fixed size. ideal for thumbnailing and such.
Its a more complete combination of the other solutions.
final int IMAGE_SIZE = 255;
boolean landscape = bitmap.getWidth() > bitmap.getHeight();
float scale_factor;
if (landscape) scale_factor = (float)IMAGE_SIZE / bitmap.getHeight();
else scale_factor = (float)IMAGE_SIZE / bitmap.getWidth();
Matrix matrix = new Matrix();
matrix.postScale(scale_factor, scale_factor);
Bitmap croppedBitmap;
if (landscape){
int start = (tempBitmap.getWidth() - tempBitmap.getHeight()) / 2;
croppedBitmap = Bitmap.createBitmap(tempBitmap, start, 0, tempBitmap.getHeight(), tempBitmap.getHeight(), matrix, true);
} else {
int start = (tempBitmap.getHeight() - tempBitmap.getWidth()) / 2;
croppedBitmap = Bitmap.createBitmap(tempBitmap, 0, start, tempBitmap.getWidth(), tempBitmap.getWidth(), matrix, true);
}
Probably the easiest solution so far:
public static Bitmap cropCenter(Bitmap bmp) {
int dimension = Math.min(bmp.getWidth(), bmp.getHeight());
return ThumbnailUtils.extractThumbnail(bmp, dimension, dimension);
}
imports:
import android.media.ThumbnailUtils;
import java.lang.Math;
import android.graphics.Bitmap;
To correct #willsteel solution:
if (landscape){
int start = (tempBitmap.getWidth() - tempBitmap.getHeight()) / 2;
croppedBitmap = Bitmap.createBitmap(tempBitmap, start, 0, tempBitmap.getHeight(), tempBitmap.getHeight(), matrix, true);
} else {
int start = (tempBitmap.getHeight() - tempBitmap.getWidth()) / 2;
croppedBitmap = Bitmap.createBitmap(tempBitmap, 0, start, tempBitmap.getWidth(), tempBitmap.getWidth(), matrix, true);
}
public Bitmap getResizedBitmap(Bitmap bm) {
int width = bm.getWidth();
int height = bm.getHeight();
int narrowSize = Math.min(width, height);
int differ = (int)Math.abs((bm.getHeight() - bm.getWidth())/2.0f);
width = (width == narrowSize) ? 0 : differ;
height = (width == 0) ? differ : 0;
Bitmap resizedBitmap = Bitmap.createBitmap(bm, width, height, narrowSize, narrowSize);
bm.recycle();
return resizedBitmap;
}
public static Bitmap resizeAndCropCenter(Bitmap bitmap, int size, boolean recycle) {
int w = bitmap.getWidth();
int h = bitmap.getHeight();
if (w == size && h == size) return bitmap;
// scale the image so that the shorter side equals to the target;
// the longer side will be center-cropped.
float scale = (float) size / Math.min(w, h);
Bitmap target = Bitmap.createBitmap(size, size, getConfig(bitmap));
int width = Math.round(scale * bitmap.getWidth());
int height = Math.round(scale * bitmap.getHeight());
Canvas canvas = new Canvas(target);
canvas.translate((size - width) / 2f, (size - height) / 2f);
canvas.scale(scale, scale);
Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG | Paint.DITHER_FLAG);
canvas.drawBitmap(bitmap, 0, 0, paint);
if (recycle) bitmap.recycle();
return target;
}
private static Bitmap.Config getConfig(Bitmap bitmap) {
Bitmap.Config config = bitmap.getConfig();
if (config == null) {
config = Bitmap.Config.ARGB_8888;
}
return config;
}
val sourceWidth = source.width
val sourceHeight = source.height
val xScale = newWidth.toFloat() / sourceWidth
val yScale = newHeight.toFloat() / sourceHeight
val scale = xScale.coerceAtLeast(yScale)
val scaledWidth = scale * sourceWidth
val scaledHeight = scale * sourceHeight
val left = (newWidth - scaledWidth) / 2
val top = (newHeight - scaledHeight) / 2
val targetRect = RectF(
left, top, left + scaledWidth, top
+ scaledHeight
)
val dest = Bitmap.createBitmap(
newWidth, newHeight,
source.config
)
val mutableDest = dest.copy(source.config, true)
val canvas = Canvas(mutableDest)
canvas.drawBitmap(source, null, targetRect, null)
binding.imgView.setImageBitmap(mutableDest)
When I rotate a bitmap it rotates but it keeps moving all over the screen and rotating simultaneously. I want it to rotate in the center ? My code is given below.
try {
c = holder.lockCanvas();
// clear the canvas
c.drawColor(Color.BLACK);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);
if (c != null) {
int width=c.getWidth();
int height=c.getHeight();
c.drawBitmap(backgroundImage, 0, 0, null);
Matrix transform = new Matrix();
Matrix transform1=new Matrix();
transform.setRotate(degree, width/2,height/2);
c.drawBitmap(image1, transform, null);
//canvas.rotate(-90);
degree+=5;
c.restore();
}
}
Try this code..
c = holder.lockCanvas();
c.drawColor(Color.BLACK);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);
if (c != null)
{
int width=c.getWidth();
int height=c.getHeight();
c.drawBitmap(backgroundImage, 0, 0, null);
Matrix matrix = new Matrix();
float px = width/2;
float py = height/2;
matrix.postTranslate(-image1.getWidth()/2, -image1.getHeight()/2);
matrix.postRotate(degree);
matrix.postTranslate(px, py);
c.drawBitmap(image1, matrix, paint);
degree+=5;
c.restore();
}
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