Develop Reference

Saving WebView with Canvas drawing

I'm trying to save as an image the contents of a WebView with a canvas drawing on top of it. I've tried two methods:
Picture picture = drawView.capturePicture();
Bitmap bmp = pictureDrawable2Bitmap(new PictureDrawable(picture));
MediaStore.Images.Media.insertImage(
getContentResolver(), bitmap,
"image" + ".png", "drawing");
private static Bitmap pictureDrawable2Bitmap(PictureDrawable pictureDrawable){
Bitmap bitmap = Bitmap.createBitmap(
pictureDrawable.getIntrinsicWidth() ,pictureDrawable.getIntrinsicHeight(),Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawPicture(pictureDrawable.getPicture());
return bitmap;
}
This gets me the entire WebView page but without the Canvas drawing.
Method 2:
Bitmap bitmap = Bitmap.createBitmap(drawView.getWidth(), drawView.getHeight(),
Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawView.draw(canvas);
MediaStore.Images.Media.insertImage(
getContentResolver(), bitmap,
"image" + ".png", "drawing");
drawView.destroyDrawingCache();
This way I get both the canvas and WebView but it only captures it at the current zoom level. Which means if I save it while zoomed in it will only save the current view state, not the entire image. It's also lower quality.
Any suggestion on how to get them together?
Some of the code:
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
canvasBitmap = Bitmap.createBitmap(w + 1500, h + 1500, Bitmap.Config.ARGB_8888);
drawCanvas = new Canvas(canvasBitmap);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
clipBounds = canvas.getClipBounds();
canvas.save();
//canvas.translate(clipBounds.left, clipBounds.top);
drawPaint.setStrokeWidth(8/mScaleFactor);
canvas.scale(mScaleFactor, mScaleFactor, 0, 0);
if(!pathsDrawn) {
canvas.drawPath(drawPath, drawPaint);
pathsDrawn = true;
}
canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
canvas.restore();
}
WebView settings:
final DrawingView drawView;
drawView = (DrawingView) findViewById(R.id.pdf);
drawView.setDrawingCacheEnabled(true);
WebSettings webSettings = drawView.getSettings();
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDefaultZoom(ZoomDensity.FAR);
webSettings.setSupportZoom(true);
webSettings.setDisplayZoomControls(false);
String data = "someurl.jpg"
drawView.loadUrl(data);
drawView.setDrawingCacheEnabled(true);
Picture picture = drawView.capturePicture();
Bitmap bmp = pictureDrawable2Bitmap(new PictureDrawable(picture));
MediaStore.Images.Media.insertImage(getContentResolver(), overlayMark(bmp, DrawingView.canvasBitmap),
"dfdsf" + ".png", "drawing");
EDIT*
Got it working for the most part. I basically drew two bitmaps with canvas. However, the web image bitmap and the drawing bitmap do not scale correctly. I had to offset this by scaling the drawing using a Matrix and redrawing the bitmap before overlaying it on the web bitmap. For some reason, scale it to 1.5f makes it line up perfectly, at least on the 10in tablet I'm testing it on. If anyone has any more insight on this or how to make it better let me know.
Matrix matrix = new Matrix();
matrix.postScale(1.5f, 1.5f);
Picture picture = drawView.capturePicture();
Bitmap bmp = pictureDrawable2Bitmap(new PictureDrawable(picture));
Bitmap resizedBitmap = Bitmap.createBitmap(DrawingView.canvasBitmap, 0, 0, DrawingView.canvasBitmap.getWidth(), DrawingView.canvasBitmap.getHeight(), matrix, false);
MediaStore.Images.Media.insertImage(getContentResolver(), overlayMark(bmp, resizedBitmap),
"dfdsf" + ".png", "drawing");
private static Bitmap pictureDrawable2Bitmap(PictureDrawable pictureDrawable){
Bitmap bitmap = Bitmap.createBitmap(
pictureDrawable.getIntrinsicWidth() ,pictureDrawable.getIntrinsicHeight(),Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawPicture(pictureDrawable.getPicture());
return bitmap;
}
private Bitmap overlayMark(Bitmap bmp1, Bitmap bmp2) {
int bh = bmp1.getHeight();
int bw = bmp1.getWidth();
Bitmap bmOverlay = Bitmap.createBitmap(bw,bh,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(bmp1, 0, 0, null);
canvas.drawBitmap(bmp2, 0, 0, null);
return bmOverlay;
}

Merge two bitmaps in android

I want to merge two bitmaps, here is my code
// Camera arg conversion to Bitmap
Bitmap cameraBitmap = BitmapFactory.decodeByteArray(arg0, 0,
arg0.length);
Bitmap back = Bitmap.createBitmap(cameraBitmap.getWidth(),
cameraBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas cam = new Canvas(back);
cam.drawBitmap(cameraBitmap, matrix, null);
// FrameLayout to Bitmap
FrameLayout mainLayout = (FrameLayout) findViewById(R.id.frame);
Bitmap foreground = Bitmap.createBitmap(mainLayout.getWidth(),
mainLayout.getHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(foreground);
mainLayout.draw(c);
Bitmap cs = null;
cs = Bitmap.createBitmap(foreground.getWidth(), cameraBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas comboImage = new Canvas(cs);
comboImage.drawBitmap(cameraBitmap, 0f, 0f, null);
comboImage.drawBitmap(foreground, 0f, cameraBitmap.getHeight(), null);
FileOutputStream fos = null;
try {
fos = new FileOutputStream(file);
if (fos != null) {
cs.compress(Bitmap.CompressFormat.PNG, 90, fos);
fos.close();
}
} catch (Exception e) {
e.printStackTrace();
}
The camera image should become background, and foreground as top image. I've tried from
Combining 2 Images in Android using Canvas but it didn't help me. Any idea.? Thanks

From your example, you forgot to add the next lines:
comboImage.drawBitmap(c, 0f, 0f, null);
comboImage.drawBitmap(s, 0f, c.getHeight(), null);
In your example above you don't draw your image in the canvas, and that is the problem.
You can think that your canvas i your sketchbook. For now you didn't paint anything, and you ask yourself, way I can't see any colors.
So, for my advice, first create the two bitmaps, then, do the next thing:
c.drawBitmap(cameraBitmap, top point, left point, null);
c.drawBitmap(foreground, top point, left point, null);
You can also do this by first create the drawable objects from your bitmaps, like in the next code:
Drawable cameraBitmap = BitmapDrawable(cameraBitmap);
Drawable foreground= BitmapDrawable(foreground);
Then when you have the drawable objects, you can set thier bounds, and that way you set where do you want to show that image.
cameraBitmap.setBounds(left, top, right, bottom);
foreground.setBounds(left, top, right, bottom);
and finally draw that on the canvas:
cameraBitmap.draw(canvas);
foreground.draw(canvas);
EDIT:
This is an example, use this to understand your implementation:
Bitmap bitmap = null;
try {
bitmap = Bitmap.createBitmap(500, 500, Config.ARGB_8888);
Canvas c = new Canvas(bitmap);
Resources res = getResources();
Bitmap bitmap1 = BitmapFactory.decodeResource(res, R.drawable.test1); //blue
Bitmap bitmap2 = BitmapFactory.decodeResource(res, R.drawable.test2); //green
Drawable drawable1 = new BitmapDrawable(bitmap1);
Drawable drawable2 = new BitmapDrawable(bitmap2);
drawable1.setBounds(100, 100, 400, 400);
drawable2.setBounds(150, 150, 350, 350);
drawable1.draw(c);
drawable2.draw(c);
} catch (Exception e) {
}
return bitmap;
This is what I get from the code above:

Merging Two Bitmap vertically when one is large and second is small
follow this method
public Bitmap finalcombieimage(Bitmap c, Bitmap s) {
Bitmap cs = null;
DisplayMetrics metrics = getBaseContext().getResources().getDisplayMetrics();
int width = metrics.widthPixels;
int height = metrics.heightPixels;
cs = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas comboImage = new Canvas(cs);
Rect dest1 = new Rect(0, 0, width, height); // left,top,right,bottom
comboImage.drawBitmap(c, null, dest1, null);
Rect dest2 = new Rect(0, height-400 / 2, width, height);
comboImage.drawBitmap(s, null, dest2, null);
return cs;
}

Please note that the BitmapDrawable(Bitmap) has been deprecated. Kinldy check this for the alternative.
BitmapDrawable(Bitmap bitmap)
This constructor was deprecated in API level 4. Use BitmapDrawable(Resources, Bitmap) to ensure that the drawable has correctly set its target density.

Resize watermark image same size as original image
Uri bmpUri1 = getLocalBitmapUri(ivImage);
Uri bmpUri2 = getLocalBitmapUri(watermark_imageview);
try {
bm1 = BitmapFactory.decodeStream(
getContentResolver().openInputStream(bmpUri1));
bm2 = BitmapFactory.decodeStream(
getContentResolver().openInputStream(bmpUri2));
Bitmap bmOverlay = Bitmap.createBitmap(bm1.getWidth(), bm1.getHeight(), bm1.getConfig());
bm2 = Bitmap.createScaledBitmap(bm2, bm1.getWidth(), bm1.getHeight(),
true);
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(bm1, 0,0, null);
canvas.drawBitmap(bm2, 0,0, null);
watermarkimage.setVisibility(View.GONE);
im =new ImageView(ImageClick.this);
im.setImageBitmap(bmOverlay);
bmpUri = getLocalBitmapUri(im);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
private Uri getLocalBitmapUri(ImageView imageView) {
Drawable drawable = imageView.getDrawable();
Bitmap bmp = null;
if (drawable instanceof BitmapDrawable){
bmp = ((BitmapDrawable) imageView.getDrawable()).getBitmap();
} else {
return null;
}
// Store image to default external storage directory
Uri bmpUri = null;
try {
File file = new File(Environment.getExternalStoragePublicDirectory(
Environment.DIRECTORY_DOWNLOADS), "share_image_" + System.currentTimeMillis() + ".png");
file.getParentFile().mkdirs();
FileOutputStream out = new FileOutputStream(file);
bmp.compress(Bitmap.CompressFormat.PNG, 90, out);
out.close();
bmpUri = Uri.fromFile(file);
} catch (IOException e) {
e.printStackTrace();
}
return bmpUri;
}

Show marker inside a resource drawable which obtained from url

Here is the map page I have, which shows all the users of my App. Also the images(markers) are obtained from the URL given from my server. These markers has to put inside a Drawable(a circle like image as shown). I created a circle like Bitmap from the url using Canvas.
public Drawable showMe(String url)
{
Bitmap bitmap=null;
try {
URL newurl = new URL(url);
bitmap = BitmapFactory.decodeStream(newurl.openConnection().getInputStream());
} catch (MalformedURLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
bitmap=getBitmap(url);
Paint paint = new Paint();
paint.setFilterBitmap(true);
int targetWidth = 30;
int targetHeight = 30;
Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, targetHeight,Bitmap.Config.ARGB_8888);
RectF rectf = new RectF(0, 0, 30, 30);
Canvas canvas = new Canvas(targetBitmap);
Path path = new Path();
path.addRoundRect(rectf, targetWidth, targetHeight, Path.Direction.CW);
canvas.clipPath(path);
canvas.drawBitmap( bitmap, new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()),
new Rect(0, 0, targetWidth, targetHeight), paint);
Matrix matrix = new Matrix();
matrix.postScale(1f, 1f);
Bitmap resizedBitmap = Bitmap.createBitmap(targetBitmap, 0, 0, 30, 30, matrix, true);
Bitmap bitmap_circle=mergeBitmaps(resizedBitmap);
BitmapDrawable bd = new BitmapDrawable(bitmap_circle);
return bd;
}
The above function will create the final drawable for the marker.Also the mergeBitmaps() function merge the both the resource drawable and the bit map together..
public Bitmap mergeBitmaps(Bitmap manBitmap){
try{
Bitmap markerBitmap = BitmapFactory.decodeResource( this.getResources(), R.drawable.circle_bg);
Bitmap bmOverlay = Bitmap.createBitmap(markerBitmap.getWidth(), markerBitmap.getHeight(), markerBitmap.getConfig());
Canvas canvas = new Canvas(bmOverlay);
Matrix matrix = new Matrix();
matrix.postScale(1f, 1f);
canvas.drawBitmap(markerBitmap, matrix, null);
canvas.drawBitmap(manBitmap, 5, 5, null);
return bmOverlay;
}
catch(Exception ex){
ex.printStackTrace();
return null;
}
}
But the problem is, this bitmap is not best fit inside the background Drawable in order to get a feeling that both together will give a single image.
Can anyone help me ?

change
canvas.drawBitmap(manBitmap, 5, 5, null);
to smtg like
canvas.drawBitmap(manBitmap, (markerBitmap.getWidth()-manbitmap.getWidth())/2,
(markerBitmap.getHeight()-manbitmap.getHeight())/2, null);

How to use Canvas for merging two images in Android?

I want to create a combined image with two different images by overlapping.
For this My code is
ImageView image = (ImageView) findViewById(R.id.imageView1);
Drawable drawableFore = getResources().getDrawable(R.drawable.foreg);
Drawable drawableBack = getResources().getDrawable(R.drawable.backg);
Bitmap bitmapFore = ((BitmapDrawable) drawableFore).getBitmap();
Bitmap bitmapBack = ((BitmapDrawable) drawableBack).getBitmap();
Bitmap scaledBitmapFore = Bitmap.createScaledBitmap(bitmapFore, 35, 35, true);
Bitmap scaledBitmapBack = Bitmap.createScaledBitmap(bitmapBack, 45, 45, true);
Bitmap combineImages = overlay(scaledBitmapBack, scaledBitmapFore);
image.setImageBitmap(combineImages);
overlay() method is
public static Bitmap overlay(Bitmap bmp1, Bitmap bmp2)
{
try
{
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;
} catch (Exception e)
{
// TODO: handle exception
e.printStackTrace();
return null;
}
}
case 1 :overlay method returns null in this case.
case 2: But when I switch images like I use background image for setting in foreground and foreground image for setting in background then code works fine.
but I want the first case should work properly but it is not.
I am not getting why this is happening.
Please Help

I think it happens, because the 2nd bitmap is bigger in size. So try this:
public static Bitmap overlay(Bitmap bmp1, Bitmap bmp2)
{
try
{
int maxWidth = (bmp1.getWidth() > bmp2.getWidth() ? bmp1.getWidth() : bmp2.getWidth());
int maxHeight = (bmp1.getHeight() > bmp2.getHeight() ? bmp1.getHeight() : bmp2.getHeight());
Bitmap bmOverlay = Bitmap.createBitmap(maxWidth, maxHeight, bmp1.getConfig());
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(bmp1, 0, 0, null);
canvas.drawBitmap(bmp2, 0, 0, null);
return bmOverlay;
} catch (Exception e)
{
// TODO: handle exception
e.printStackTrace();
return null;
}
}

Convert view to bitmap on Android

I need to convert a view to a bitmap to preview my view and to save it as an image. I tried using the following code, but it creates a blank image. I cannot understand where I made a mistake.
View viewToBeConverted; Bitmap viewBitmap = Bitmap.createBitmap(viewToBeConverted.getWidth(), viewToBeConverted.getHeight(),Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(viewBitmap);
viewToBeConverted.draw(canvas);
savephoto(“f1”, viewBitmap);
//// public void savephoto(String filename,Bitmap bit)
{
File newFile = new File(Environment.getExternalStorageDirectory() + Picture_Card/"+ filename+ ".PNG");
try
{
newFile.createNewFile();
try
{
FileOutputStream pdfFile = new FileOutputStream(newFile); Bitmap bm = bit; ByteArrayOutputStream baos = new ByteArrayOutputStream(); bm.compress(Bitmap.CompressFormat.PNG,100, baos); byte[] bytes = baos.toByteArray();
pdfFile.write(bytes);
pdfFile.close();
}
catch (FileNotFoundException e)
{ //
}
} catch (IOException e)
{ //
}
}

here is my solution:
public static Bitmap getBitmapFromView(View view) {
//Define a bitmap with the same size as the view
Bitmap returnedBitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(),Bitmap.Config.ARGB_8888);
//Bind a canvas to it
Canvas canvas = new Canvas(returnedBitmap);
//Get the view's background
Drawable bgDrawable =view.getBackground();
if (bgDrawable!=null)
//has background drawable, then draw it on the canvas
bgDrawable.draw(canvas);
else
//does not have background drawable, then draw white background on the canvas
canvas.drawColor(Color.WHITE);
// draw the view on the canvas
view.draw(canvas);
//return the bitmap
return returnedBitmap;
}
Enjoy :)

The most voted solution did not work for me because my view is a ViewGroup(have been inflated from a LayoutInflater). I needed to call view.measure to force the view size to be calculated in order to get the correct view size with view.getMeasuredWidth(Height).
public static Bitmap getBitmapFromView(View view) {
view.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
Bitmap bitmap = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
view.draw(canvas);
return bitmap;
}

use new kotlin extention function view.drawToBitmap()
mLayout.drawToBitmap()

Here is extension in Kotlin inspired by : Google Android Maps Utils Icon Generator
fun View.convertToBitmap(): Bitmap {
val measureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
measure(measureSpec, measureSpec)
layout(0, 0, measuredWidth, measuredHeight)
val r = Bitmap.createBitmap(measuredWidth, measuredHeight, Bitmap.Config.ARGB_8888)
r.eraseColor(Color.TRANSPARENT)
val canvas = Canvas(r)
draw(canvas)
return r }

Conversion of Layout or view to bitmap :
private Bitmap createBitmapFromLayout(View tv) {
int spec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
tv.measure(spec, spec);
tv.layout(0, 0, tv.getMeasuredWidth(), tv.getMeasuredHeight());
Bitmap b = Bitmap.createBitmap(tv.getMeasuredWidth(), tv.getMeasuredHeight(),
Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
c.translate((-tv.getScrollX()), (-tv.getScrollY()));
tv.draw(c);
return b;
}
Without xml:
private Bitmap createBitmapFromView() {
TextView tv = new TextView(this);
tv.setText("Hello Android !!");
tv.setTextColor(Color.WHITE);
tv.setBackgroundColor(Color.GRAY);
int spec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
tv.measure(spec, spec);
tv.layout(0, 0, tv.getMeasuredWidth(), tv.getMeasuredHeight());
Bitmap b = Bitmap.createBitmap(tv.getMeasuredWidth(), tv.getMeasuredHeight(),
Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
c.translate((-tv.getScrollX()), (-tv.getScrollY()));
tv.draw(c);
return b;
}

All answers using drawing on the canvas won't work with a GLSurfaceView.
To capture the content of a GLSurfaceView into a bitmap you should consider to implement a custom method with gl.glReadPixels inside Renderer::onDrawFrame().
A solution snippet has been posted here.

since API level 24 there is a better way with PixelCopy
example of use:
/**
* use [PixelCopy] to take a snap shoot of the given view
*/
fun copyViewPixelsToBitmap(window: Window?, view: View): Bitmap {
val snap = Bitmap.createBitmap(view.width, view.height, Bitmap.Config.ARGB_8888)
val listener = PixelCopy.OnPixelCopyFinishedListener {
if (it != PixelCopy.SUCCESS) {
Log.d("copyViewPixelsToBitmap failed with error: $it")
}
}
val xy = IntArray(2)
view.getLocationInWindow(xy)
val rect = Rect(xy[0], xy[1], xy[0] + view.width, xy[1] + view.height)
window?.let {
PixelCopy.request(it, rect, snap, listener,
Handler(Looper.getMainLooper()))
}
return snap
}

To get a bitmap exactly as it is shown on the screen, you can use the view after it has been displayed with a Runnable:
void viewToBitmap(View view) {
view.post(new Runnable() {
#Override
public void run() {
Bitmap bitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
view.draw(canvas);
// Do stuff
}
});
}

Just use the below code to straight:This will convert any view(FrameLayout/LinearLayout/RelativeLayout/etc) to the bitmap.
private Bitmap getBitmapFromView(View view) {
view.setDrawingCacheEnabled(true);
return view.getDrawingCache();
}