I want to save the canvas object in onDraw() method to be saved as a bitmap. Please do not suggest answers like "view.getDrawingCache(true)" .I want to save canvas directly to a bitmap
// first create a mutable bitmap - you determine the size
bkg = Bitmap.createBitmap(width, width, Bitmap.Config.ARGB_8888);
// create a canvas with that empty bitmap
Canvas c = new Canvas(bkg);
// do whatever drawing methoods you need....I did a circle
c.drawColor(mContext.getResources().getColor(R.color.off_white));
p.setColor(pixel);
c.drawCircle(width / 2, width / 2, width / 2, p);
// then pull off the entire canvas as a bitmapdrawable (or bitmap, if you perfer)
return new BitmapDrawable(mContext.getResources(), bkg);
Related
I need to create a canvas element with exact pixel size (500x500). How do I set width/height in px?
Might not be applicable in your case, but this works for me
Bitmap animation = BitmapFactory.decodeResource(mContext.getResources(), resourceId, mBitmapOptions); //Get a bitmap from a image file
// Create a bitmap for the part of the screen that needs updating.
Bitmap bitmap = Bitmap.createBitmap(animation.getWidth(), animation.getHeight(), BITMAP_CONFIG);
bitmap.setDensity(DisplayMetrics.DENSITY_DEFAULT);
Canvas canvas = new Canvas(bitmap);
You have create bitmap of the size which you want. and then Canvas canvas = new Canvas(bitmap);
This sets the canvas to the size of the bitmap
just like view.height = 100, so this view's height is 100 in px unit
I have a Picture object, loaded from an SVG file, and I have set hardwareAccelerated=false to make it works on all devices.
Since there is a bug on android 4.0.4, I have to convert the Picture to Bitmap and I do that, in this way:
...
...
public void draw(Canvas canvas) {
...
...
//myPicture size is 9000x5000 but I want to display only this portion
clipRect.set(50, 50, 370, 530);
Bitmap bmp = getBitmapFromPicture(myPicture, clipRect);
canvas.drawBitmap(bmp, 0, 0, null);
bmp.recycle();
...
...
}
public static Bitmap getBitmapFromPicture(Picture picture, RectF clipRect) {
Bitmap bitmap = Bitmap.createBitmap(Math.round(clipRect.width()), Math.round(clipRect.height()), Config.RGB_565);
Canvas canvas = new Canvas(bitmap);
canvas.drawPicture(picture);
}
Now I want to clip the Picture because I want to display only the visible screen part of it.
But the canvas.drawPicture does not accept srcRect parameter.
How is it possible to achieve this?
EDIT:
By translate the canvas: canvas.translate(-50, -50) it seems that translate the bitmap, too.
You need to set a transform on the Canvas.
To move the portion of the picture at 50,50 down so it is on the bitmap (ie. at 0,0), just do:
canvas.translate(-50, -50);
So your method becomes:
public static Bitmap getBitmapFromPicture(Picture picture, RectF clipRect)
{
Bitmap bitmap = Bitmap.createBitmap(Math.round(clipRect.width()),
Math.round(clipRect.height()),
Config.RGB_565);
Canvas canvas = new Canvas(bitmap);
canvas.translate(-clipRect.left, -clipRect.top);
canvas.drawPicture(picture);
}
I have one image image 1 and one is coming from server that is image 2 i am trying to draw second one just at the center of the first. as result i want single image like in pic .
This should do what you're looking for:
The backgroundBitmap variable would be your image1 and the bitmapToDrawInTheCenter would be your image2.
public void centerImageInOtherImage()
{
Bitmap backgroundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
Bitmap bitmapToDrawInTheCenter = BitmapFactory.decodeResource(getResources(), R.drawable.ic_action_search);
Bitmap resultingBitmap = Bitmap.createBitmap(backgroundBitmap.getWidth(), backgroundBitmap.getHeight(), backgroundBitmap.getConfig());
Canvas canvas = new Canvas(resultingBitmap);
canvas.drawBitmap(backgroundBitmap, new Matrix(), null);
canvas.drawBitmap(bitmapToDrawInTheCenter, (backgroundBitmap.getWidth() - bitmapToDrawInTheCenter.getWidth()) / 2, (backgroundBitmap.getHeight() - bitmapToDrawInTheCenter.getHeight()) / 2, new Paint());
ImageView image = (ImageView)findViewById(R.id.myImage);
image.setImageBitmap(resultingBitmap);
}
Courtesy : Draw text/Image on another Image in Android
Drawing images over each other is fairly simple with Canvas. Canvas basically acts as the drawing board to draw text/Image. You just need to construct a canvas with the first Image and then draw the second Image at the center as shown below
/* This ImageOne will be used as the canvas to draw an another image over it. Hence we make it mutable using the copy API
as shown below
*/
Bitmap imageOne = BitmapFactory.decodeResource(getResources(), R.drawable.imageOne).copy(Bitmap.Config.ARGB_8888,true);
// Decoding the image two resource into a Bitmap
Bitmap imageTwo= BitmapFactory.decodeResource(getResources(), R.drawable.imageTwo);
// Here we construct the canvas with the specified bitmap to draw onto
Canvas canvas=new Canvas(imageOne);
/*Here we draw the image two on the canvas using the drawBitmap API.
drawBitmap takes in four parameters
1 . The Bitmap to draw
2. X co-ordinate to draw from
3. Y co ordinate to draw from
4. Paint object to define style
*/
canvas.drawBitmap(imageTwo,(imageOne.getWidth())/2,(imageOne.getHeight())/2,new Paint());
imageView.setImageBitmap(imageOne);
I wanted to create an app by taking images from the sd card and add caption to it. Also I wanted to move the caption as per our wish and place it somewhere as desired and save it .can you please suggest an idea for doing this. Also if we want to add a caption to the existing image from SD card then , do we need to have database for doing this. or can it be saved directly to the SD card.
Refer This Answer
You can put an EditText and Write into it and after writting you first convert it to Bitmap like
Bitmap bmp = Bitmap.createBitmap(mEditText.getDrawingCache());
Now you can add created image bmp to your original image like this
call :
Bitmap combined = combineImages(bgBitmap,bmp);
public Bitmap combineImages(Bitmap background, Bitmap foreground) {
int width = 0, height = 0;
Bitmap cs;
width = getWindowManager().getDefaultDisplay().getWidth();
height = getWindowManager().getDefaultDisplay().getHeight();
cs = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas comboImage = new Canvas(cs);
background = Bitmap.createScaledBitmap(background, width, height, true);
comboImage.drawBitmap(background, 0, 0, null);
comboImage.drawBitmap(foreground, matrix, null);
return cs;
}
Use canvas (Custom Views) for it..
I think this is the only way to make one view (Image in one canvas) on other view (caption in other canvas) on it. So in this you have to complete knowledge of how views draw on canvas and how to move to that views. And using canvas you can also smoothly move your views on screen.
After creating custom views you can save those views in Bitmap, now you can also combine those images to one bitmap..
(Here Customeviews are ImageViews, TextViews, EditText etc..)
All the best. :-)
USe like this.
cs = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas comboImage = new Canvas(cs);
background = Bitmap.createScaledBitmap(background, width, height, true);
comboImage.drawBitmap(background, 0, 0, null);
comboImage.drawText("title", x, y, paint);
A seemingly simple issue, I have an off-screen bitmap that I perform some transformations to (rotation, scaling, etc) and I'd like to store a copy of the bitmap prior to the transformations, such that in my View's onDraw(), I can display the transformed off-screen bitmap AND a smaller scaled version of the un-transformed bitmap as a thumbnail.
No problem writing the off-screen bitmap in onDraw(), but the copied 'preserved' bitmap is also being transformed. Here is the code where I am making the copy of the bitmap, where mCanvas was created via mCanvas = new Canvas(mBitmap);:
mPreservedBitmap = Bitmap.createBitmap(mBitmap);
// save the canvas
mCanvas.save();
// do some rotations, scaling
mCanvas.rotate(rotation, px, py);
mCanvas.scale(scaleFactor, scaleFactor, scaleFocusX, scaleFocusY);
// draw the bitmaps to the screen
invalidate();
// restore the bitmap
mCanvas.restore();
In onDraw(), I have:
// draw the off-screen bitmap to the on-screen bitmap
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
// draw the preserved image, scaling it to a thumbnail first
canvas.drawBitmap(
Bitmap.createScaledBitmap(mPreservedBitmap, (int) thumbWidth, (int) thumbHeight, true),
null,
thumbnailRectF,
thumbCanvasPaint);
The thumbnail gets scaled to the appropriate size, but the bitmap that is being scaled down to thumbnail size is also rotated and scaled the exact same as mBitmap, which I don't want. I've also tried the Bitmap.copy() method, but with the same results. Any pointers/assitance/advice?
Thanks,
Paul
You are doing it wrong :) First of all you should never keep a reference to a Canvas in a field. There is no guarantee whatsoever that the Canvas instance will be the same in two different calls to onDraw(). Your second problem is how you apply the transformations. You should apply them in onDraw():
canvas.save();
canvas.rotate(rotation, px, py);
canvas.scale(scaleFactor, scaleFactor, scaleFocusX, scaleFocusY);
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
canvas.restore();
canvas.drawBitmap(
Bitmap.createScaledBitmap(mPreservedBitmap, (int) thumbWidth, (int) thumbHeight, true), null, thumbnailRectF, thumbCanvasPaint);
invalidate() is not a synchronous operation, your save()/restore() has no guarantee to work if done outside of onDraw().
Also do not call createScaledBitmap() from onDraw(), it is extremely expensive.
To expand on my comment:
Bitmap.createBitmap(Bitmap) returns an immutable bitmap. The documentation actually says that it might be the same object or use the same data.
You have to create a mutable bitmap, if you actually want to modify it, for example:
mPreservedBitmap = mBitmap;
// Create a new, empty bitmap with the original size.
// Since the image is going to be scaled, this might be to big or to small.
// Rotating might also require additional space (otherwise the corners will be cut off)
// Try calculating the proper size or play around with some other createBitmap Methods, just make sure to
// actually create a mutable bitmap, for example by using copy on an immutable bitmap.
mBitmap = Bitmap.createBitmap(mPreservedBitmap.getWidth(), mPreservedBitmap.getHeight(), mPreservedBitmap.getConfig());
mCanvas = new Canvas(mBitmap);
// do some rotations, scaling
mCanvas.rotate(rotation, px, py);
mCanvas.scale(scaleFactor, scaleFactor, scaleFocusX, scaleFocusY);
// draw the original image to the canvas, applying the matrix modifications
mCanvas.drawBitmap(mPreservedBitmap, 0, 0, null);
And in onDraw:
// draw the off-screen bitmap to the on-screen bitmap
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
// draw the preserved image, scaling it to a thumbnail
canvas.drawBitmap(mPreservedBitmap, null, thumbnailRectF, thumbCanvasPaint);
My final solution to this was to generate a copy of the canvas Bitmap PRIOR to it being scaled via:
mPreservedBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), null, true);
Then, when the Canvas and the primary Bitmap is scaled, I can draw the non-scaled 'preserved' Bitmap to the Canvas in onDraw() via:
canvas.drawBitmap(mPreservedBitmap, null, thumbnailRectF, thumbCanvasPaint);
Per Romain's comments above, I scale the preserved Bitmap off-screen to improve performance in onDraw().