I'm writing a simple camera app, that would let the user take a picture, and the app would write some information into the image.
I'm getting out of memory errors, because the image could be huge. Depends on the camera hardware.
This is how I'm writing the text onto the image:
public static byte[] writeTextOnImage(byte[] imgData, String text) {
Bitmap bitmap = BitmapFactory.decodeByteArray(imgData, 0, imgData.length);
Bitmap mutableBitmap = bitmap.copy(Bitmap.Config.RGB_565, true);
Canvas canvas = new Canvas(mutableBitmap);
Paint paint = new Paint();
int dist = 30;
Rect areaRect = new Rect(dist, mutableBitmap.getHeight() - dist, 170, (int) (mutableBitmap.getHeight() - dist * 1.6f));
paint.setColor(Color.BLACK);
canvas.drawRect(areaRect, paint);
RectF bounds = new RectF(areaRect);
bounds.right = paint.measureText(text, 0, text.length());
bounds.bottom = paint.descent() - paint.ascent();
bounds.left += (areaRect.width() - bounds.right) / 2.0f;
bounds.top += (areaRect.height() - bounds.bottom) / 2.0f;
paint.setColor(Color.WHITE);
canvas.drawText(text, bounds.left, bounds.top - paint.ascent(), paint);
ByteArrayOutputStream stream = new ByteArrayOutputStream();
mutableBitmap.compress(Bitmap.CompressFormat.JPEG, 100, stream);
return stream.toByteArray();
}
I guess I should not even think about loading the whole image, but I still have to write on it somehow. Is it possible to edit an image file without loading all of it into the memory?
You can manipulate image in NDK. Memory available to native code is limited only by device RAM. Downside is that you have to decode image in native code.
Related
So, I'm using this library https://github.com/thuytrinh/android-collage-views to add "MultiTouchListener" feature to my ImageView. Basically I let user to modify a photo to his needs using rotation, scale and translation. Now the only problem is how to save it. I did it like this:
Bitmap bitmap = Bitmap.createBitmap(imageContainer.getWidth(), imageContainer.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.WHITE);
imageContainer.draw(canvas);
It works, but image is not big enough - it's as big as view on phone so it depends on screen resolution. And I want to "apply" these transformations on given bitmap with full size. And I want transformed image to look like on screen (so it'll need to crop everything out of screen)
I tried the following:
Bitmap newBitmap = Bitmap.createBitmap(image.getWidth(), image.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(newBitmap);
canvas.drawColor(Color.WHITE);
Paint paint = new Paint();
paint.setAntiAlias(true);
canvas.drawBitmap(image, imageView.getMatrix(), paint);
But it doesn't look as expected.
User screen:
And output image (without cropping, because I don't want which side I should crop):
How can I fix this? Is there any solution?
Here is one way to do it, definitely not perfect but should give you a good start :
In this, container refers to the view that contains the transformed ImageView, the phone case on your screenshot and src the raw source bitmap.
First, you need to compute the desired width and height of the output bitmap, i.e the size it would be to make the image fit in it while keeping the ratio of the container :
float containerWidth = containerView.getWidth();
float containerHeight = containerView.getHeight();
float srcWidth = src.getWidth();
float srcHeight = src.getHeight();
float containerRatio = containerWidth / containerHeight;
float srcRatio = srcWidth / srcHeight;
float outputWidth, outputHeight;
if(srcRatio > containerRatio) { //fits in width
outputWidth = srcWidth;
outputHeight = srcWidth / containerRatio;
}
else if(srcRatio < containerRatio) { //fits in height
outputHeight = srcHeight;
outputWidth = srcHeight * containerRatio;
}
else {
outputWidth = srcWidth;
outputHeight = srcHeight;
}
Apply the ratio between container width/height and output width/height to the translation part of the matrix that hold the transformation that the user did
float containerToOutputRatioWidth = outputWidth / containerWidth;
float containerToOutputRatioHeight = outputHeight / containerHeight;
float[] values = new float[9];
transformedImageView.getMatrix().getValues(values);
values[2] = values[2] * containerToOutputRatioWidth;
values[5] = values[5] * containerToOutputRatioHeight;
Matrix outputMatrix = new Matrix();
outputMatrix.setValues(values);
Draw the output bitmap as you were doing with the correct size (outputWidth, outputHeight) and matrix (outputMatrix).
Bitmap newBitmap = Bitmap.createBitmap(Math.round(outputWidth), Math.round(outputHeight), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(newBitmap);
canvas.drawColor(Color.WHITE);
Paint paint = new Paint();
paint.setAntiAlias(true);
canvas.drawBitmap(src, outputMatrix, paint);
.
Warnings
You should be careful about memory allocation, this code will lead to allocate some massive bitmaps, you should implement some kind of limit that get along with your needs. (Also do allocation and drawing in background)
You might need to do some adjustment depending on where you place the image in the first place.
Im using camera in my android app but I have to add text to save captured image (after capturing image app should ask to add text to save captured image). How can I do this ?
What I think you are trying to do is to save a note with the image.
You should create a directory in which you will save the image with say name "image****.jpg". In the same directory create a file with same name but with different extension on no extension at all. (like "image****.txt").
When you access the image file, open the note file seperately and process it.
Try this to write text to bitmap from camera...
private Bitmap writeTextBitmap(Bitmap bitmap,String text) {
Typeface tf = Typeface.create("Helvetica", Typeface.BOLD);
Paint paint = new Paint();
paint.setStyle(Style.FILL);
paint.setColor(Color.WHITE);
paint.setTypeface(tf);
paint.setTextAlign(Align.CENTER);
paint.setTextSize(20);
Rect textRect = new Rect();
paint.getTextBounds(text, 0, text.length(), textRect);
Canvas canvas = new Canvas(bitmap);
//If the text is bigger than the canvas , reduce the font size
if(textRect.width() >= (canvas.getWidth() - 4)) //the padding on either sides is considered as 4, so as to appropriately fit in the text
paint.setTextSize(convertToPixels(mContext, 7)); //Scaling needs to be used for different dpi's
//Calculate the positions
int xPos = (canvas.getWidth() / 2) - 2; //-2 is for regulating the x position offset
//"- ((paint.descent() + paint.ascent()) / 2)" is the distance from the baseline to the center.
int yPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint.ascent()) / 2)) ;
canvas.drawText(text, xPos, yPos, paint);
return bitmap;
}
I want to use custom markers on google maps in my Android app.
For this I have a method, which creates me Bitmaps. Each Bitmap is a marker including special text on it.
I have done this and it works ok on my 2.3.3 Android. But on other devices it crashes, cause I dont use mutable Bitmaps.
I changed my code to mutable Bitmaps, but now the text isn't visible, just the marker bitmap without text.
My method:
Bitmap bm = BitmapFactory.decodeResource(context.getResources(), R.drawable.marker);
Typeface tf = Typeface.create("Helvetica", Typeface.BOLD);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
paint.setTypeface(tf);
paint.setTextAlign(Paint.Align.CENTER);
paint.setTextSize(convertToPixels(context, 8));
Rect textRect = new Rect();
paint.getTextBounds(markerText, 0, markerText.length(), textRect);
// THIS LINE IS NEW FOR MUTABLE
Bitmap mutableBitmap = bm.copy(Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(mutableBitmap);
if(textRect.width() >= (canvas.getWidth() - 4)){
paint.setTextSize(convertToPixels(context, 7));
}
int xPos = (canvas.getWidth() / 2) - 2;
int yPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint.ascent()) / 2)) ;
canvas.drawText(markerText, xPos, yPos, paint);
return bm;
What I am doing wrong? I just add the line with mutable.
best regards
Your method returns the immutable bitmap that you obtained using BitmapFactory.decodeResource().
You must return the mutable bitmap you drawed on:
return mutableBitmap;
I am trying to create a jigsaw puzzle game, and I would like to know of alternative ways of creating puzzle pieces without using mask. Currently I have jigsaw pieces by taking a full image, breaking that image up into four pieces (lets say the puzzle is 2x2) and then storing and applying a mask to each piece. It looks like the below
// create standard puzzle pieces
arryPieceEndPos = new int[mCols][mRows];
arryPieceImg = new Bitmap[mCols * mRows];
arryIsPieceLocked = new boolean[mCols * mRows];
int pos = 0;
for (int c = 0; c < mCols; c++) {
for (int r = 0; r < mRows; r++) {
arryPieceImg[pos] = Bitmap.createBitmap(mBitmap,
c * mPieceWidth, r * mPieceHeight,
mPieceWidth, mPieceHeight);
arryIsPieceLocked[pos] = false;
arryPieceEndPos[c][r] = pos;
pos++;
}
}
I then use a helper method to apply a mask to each piece
private Bitmap maskMethod(Bitmap bmpOriginal, Bitmap bmpMask) {
// adjust mask bitmap if size is not the size of the puzzle piece
if (bmpMask.getHeight() != mPieceHeight ||
bmpMask.getWidth() != mPieceWidth) {
Log.e("TEST", "Resize Error :: H (mask): " + bmpMask.getHeight() + " // W (mask): " +
bmpMask.getWidth());
Log.d("TEST", "Resize Error :: H (norm): " + mPieceHeight + " // W (norm): " +
mPieceWidth);
}
Canvas canvas = new Canvas();
Bitmap combine = Bitmap.createBitmap(bmpOriginal.getWidth(), bmpOriginal.getHeight(), Bitmap.Config.ARGB_8888);
canvas.setBitmap(combine);
Paint paint = new Paint();
paint.setFilterBitmap(false);
canvas.drawBitmap(bmpOriginal, 0, 0, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawBitmap(bmpMask, 0, 0, paint);
paint.setXfermode(null);
return combine;
}
I saw this post > http://java.dzone.com/news/connect-pictures-android for connecting pieces together, however, this does not go over generating pieces programmatically without masks. Can anyone provide code examples of how this can be accomplished? The only clue I have is that I should be using Path, however, I am still not sure how. Thanks in advance!
A puzzle piece is a pretty complex view to create, but I can help you understand how to use path. Here is the link to the developer website: http://developer.android.com/reference/android/graphics/Path.html
Look into this link. I made a small thing for you to start. The one thing you need to figure out is how to cut a small circle out of the path, which I wouldn't know. I think you have to look into clipping to have your path follow a circle (you could also do clipping for creating the circle outside the piece, I just haven't done clipping before).
private Bitmap getPuzzleBitmap(Bitmap bitmap)
{
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
calculatePuzzlePath(bitmap.getWidth(), bitmap.getHeight());
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawPath(puzzlePath, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
private void calculatePuzzlePath(int width, int height)
{
float radius = (height / 2) - 5;
float smallRadius = radius / 3;
radius -= smallRadius * 2;
float centerX = width/2;
float centerY = height/2;
puzzlePath = new Path();
// Bottom right
puzzlePath.moveTo(centerX + radius, centerY + radius);
// Top right
puzzlePath.lineTo(centerX + radius, centerY - radius);
// Center top
puzzlePath.lineTo(centerX, centerY - radius);
// Add outside circle to center top
puzzlePath.addCircle(centerX, centerY - radius - ((radius / 3) / 2), radius / 3, Path.Direction.CCW);
// Top left
puzzlePath.lineTo(centerX - radius, centerY - radius);
// Bottom left
puzzlePath.lineTo(centerX - radius, centerY + radius);
//Bottom right
puzzlePath.lineTo(centerX + radius, centerY + radius);
}
I hope this is sufficient to get started with this.
Good luck!
I am trying to draw a avatar bitmap using this code. But the bitmap is pixelated. Here is my Code. Currently I use createScaledBitmap to resize the avatar image. Also the Text are a little smaller on some devices with a high resolution
BitmapFactory.Options opt = new BitmapFactory.Options();
opt.inMutable = true;
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.card_nodpi, opt) ;
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setTextSize(40);
paint.setTypeface(Typeface.create(Typeface.DEFAULT, Typeface.BOLD));
canvas.drawText("The quick brown fox", x, y, paint);
Paint paint2 = new Paint();
paint2.setColor(Color.BLACK);
paint2.setTextSize(30);
canvas.drawText("The quick brown fox", x, y + (40), paint2);
canvas.drawText("The quick brown fox", x, y + ((40 * 2)), paint2);
if (avatar != null) {
Bitmap img = Bitmap.createScaledBitmap(avatar, 250, 250, false);
canvas.drawBitmap(img, bitmap.getWidth() - img.getWidth() - x, y - 40, new Paint(Paint.FILTER_BITMAP_FLAG));
}
imageView.setImageBitmap(bitmap);
createScaledBitmap can produce some funky/bad quality images.
Try out this solution here:
https://stackoverflow.com/a/7468636/4557530
Let me know if that does anything for you!
Alternatively,
try this, I used this code before thanks to some blog, which I don't remember anymore
Bitmap newBM = Bitmap.createBitmap(newWidth, newHeight, Config.ARGB_8888);
float scaleX = newWidth / (float) origBM.getWidth();
float scaleY = newHeight / (float) origBM.getHeight();
float pivX = 0;
float pivY = 0;
Matrix scaleMatrix = new Matrix();
scaleMatrix.setScale(scaleX, scaleY, pivotX, pivotY);
Canvas canvas = new Canvas(newBM);
canvas.setMatrix(scaleMatrix);
canvas.drawBitmap(origBM, 0, 0, new Paint(Paint.FILTER_BITMAP_FLAG));