I have drawn some lines on html5 canvas within webview and tried to take screenshot of the webview using below code...
WebView webView = (WebView) findViewById(R.id.webview);
webView.setDrawingCacheEnabled(true);
Bitmap screenshot = Bitmap.createBitmap(webView.getDrawingCache());
webView.setDrawingCacheEnabled(false);
File myFile = new File(Environment.getExternalStorageDirectory().getPath()+ "/myfolder");
if(!myFile.exists()) {
myFile.mkdir();
}
imagePath = myFile.getAbsolutePath() + "/myimage001.png";
FileOutputStream fos = null;
try {
fos = new FileOutputStream(imagePath);
if ( fos != null ) {
screenshot.compress(Bitmap.CompressFormat.PNG, 100, fos);
fos.close();
}
} catch( Exception e ) {
e.printStackTrace();
}
But when I open that image then it looks empty. Please help.
Do as follows
private void TakeScreenshot()
{
Picture picture = webview.capturePicture();
Bitmap b = Bitmap.createBitmap( picture.getWidth(),
picture.getHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas( b );
picture.draw( c );
FileOutputStream fos = null;
try {
fos = new FileOutputStream( "mnt/sdcard/yahoo.jpg" );
if ( fos != null )
{
b.compress(Bitmap.CompressFormat.JPEG, 100, fos);
fos.close();
}
}
catch( Exception e )
{
}
}
N.B: Take the screenshot after the WebView finishes loading otherwise you will get a blank screen.
I too found taking screenshots of webview displaying a HTML5 canvas directly from android app really unreliable. But there is a workaround -
You can use window.JSInterface.(params) to call an android java function from javascript. You can use canvas.toDataURL() to get a base64 encoded string of the canvas image and use it as the parameter to pass to the function. In the android function, capture the string, decode it and you have the image.
The only caveat is that the canvas area alone will come in as image and not the full device screen. Also, if the canvas didn't have a background color set, the captured png image will have a transparent background. But these can be easily solved by image manipulation from the app code.
E.g. In this game app, the game runs in a HTML5 canvas displayed in a webview. When the game finishes, a "share score" option uses the above technique to capture the canvas image to share.
https://play.google.com/store/apps/details?id=com.skipser.flappytrex
To capture screenshot:
File srcFile= driver.getScreenshotAs(OutputType.FILE);
String filename = UUID.randomUUID().toString();
File targetFile = new File("D:\\Appium\\" + filename + ".png");
FileUtils.copyFile(srcFile, targetFile);
System.out.println(targetFile);enter code here
Related
The below code captures the webview image and save it in Pictures folder. The code is as follows
public static void getBitmapOfWebView(final WebView webView){
Date now = new Date();
String mPath = Environment.getExternalStorageDirectory() + File.separator + Environment.DIRECTORY_PICTURES + File.separator + "Screenshot_" + now + ".jpg";
webView.setDrawingCacheEnabled(true);
webView.buildDrawingCache(true);
Picture picture = webView.capturePicture();
Bitmap b = Bitmap.createBitmap( webView.getWidth(), webView.getHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
picture.draw(c);
FileOutputStream fos = null;
try {
fos = new FileOutputStream(mPath);
if ( fos != null ) {
b.compress(Bitmap.CompressFormat.JPEG, 100, fos);
fos.close();
}
}
catch(Exception e) {}
b.recycle();
}
The above code works and saves the screenshot in the pictures folder. But the problem is when i scroll down the WebView and try to execute the same code again, it saves the old screenshot of the webview in the pictures folder.
How do i code in such a way that when i scroll the Webview, it should save the current screenshot of the webview.
Any help Appreciated.
Thank you.
I'm trying to convert html files stored as assets to image so that I can share them. I tried the following code:
Picture picture = webView.capturePicture();
Bitmap b = Bitmap.createBitmap(
picture.getWidth(), picture.getHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
picture.draw(c);
FileOutputStream fos = null;
try {
fos = new FileOutputStream( Environment.getExternalStorageDirectory().toString() +"/temp.jpg");
if ( fos != null ) {
b.compress(Bitmap.CompressFormat.JPEG, 100, fos);
Toast.makeText(SyllabusPage_NW.this, "created", Toast.LENGTH_SHORT).show();
Intent sharingIntent = new Intent(Intent.ACTION_SEND);
Uri screenshotUri = Uri.parse(Environment.getExternalStorageDirectory().toString() + "/temp.jpg");
sharingIntent.setType("image/jpeg");
sharingIntent.putExtra(Intent.EXTRA_STREAM, screenshotUri);
startActivity(Intent.createChooser(sharingIntent, "Share image using"));
fos.close();
}
}
catch( Exception e ) {
Toast.makeText(SyllabusPage_NW.this, "Error", Toast.LENGTH_SHORT).show();
}
The result of this is attached and the expected result is also attached. The webview captures only the first part of the html page.
I wanna know how I can capture the entire html page instead of just the first bit?
for API Lollipop and higher should enable slow draw:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
WebView.enableSlowWholeDocumentDraw();
}
then check the height of picture is correct by debugging.
if not measre webview first then layout.
webView.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
webView.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
webView.buildDrawingCache(true);
Bitmap b = Bitmap.createBitmap(webView.getDrawingCache());
webView.setDrawingCacheEnabled(false);
i followed this link to screenshot my webview completely. It works fine.
But I have an issue. The screenhot that I get from the webview contains white spaces on the top and bottom of the picture? How do I get rid of this? Kindly let me know.
This is the code that I've used for capturing from webview. IF YOU LOOK PROPERLY THERE IS WHITESPACE BOTH AT THE BOTTOM AND TOP PARTS OF THE IMAGE.
public static String saveCapturedImageToSdCard() {
Picture picture = WebViewActivity.sWebViewEx.capturePicture();
Bitmap b = Bitmap.createBitmap( picture.getWidth(),
picture.getHeight(), Bitmap.Config.ARGB_8888);
File file = null;
Canvas c = new Canvas( b );
picture.draw( c );
// FileOutputStream fos = null;
try {
file = new File(Environment.getExternalStorageDirectory()+"/"+"temp.png");
if(file != null && !file.exists())
file.createNewFile();
// write the bytes in file
FileOutputStream fos = new FileOutputStream(file);
fos = new FileOutputStream(file);
if ( fos != null )
{
b.compress(Bitmap.CompressFormat.PNG, 100, fos);
fos.close();
}
}
catch( Exception e )
{
}
return file.getPath().toString();
}
This is the image that I get from the webview:
My XML is:
<WebView
android:id="#+id/webview"
android:layout_below="#id/linearlayout_topbuttons"
android:layout_above="#id/gallery_webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:overScrollMode="never"
android:fitsSystemWindows="true"
android:background="#android:color/transparent"
android:layout_centerInParent="true"
/>
I am trying to use the VuDroid PDF viewer and I need to take the rendered bitmap and store it as a byte[]. Then I need to convert it back into a Bitmap that can be displayed on a view using something like "canvas.drawBitmap(bitmap, 0, 0, paint);".
I have spent many hours trying to access the Bitmap and I might have done it already, but even if I get the byte[] to return something it still wont render as a Bitmap on the canvas.
Could someone please help me here, I must be missing something. Thank you so much.
I believe it is supposed to accessed via...
PDFPage.java .... public Bitmap renderBitmap(int width, int height, RectF pageSliceBounds)
-or-
through Page.java -or- DocumentView.java -or- DecodeService.java
Like I said I have tried all of these and have gotten results I just cannot see where I am going wrong since I cannot render it to see if the Bitmap was called correctly.
Thank you again :)
The doc says the method returns "null if the image could not be decode." You can try:
byte[] image = services.getImageBuffer(1024, 600);
InputStream is = new ByteArrayInputStream(image);
Bitmap bmp = BitmapFactory.decodeStream(is);
I think This will help you:-
Render a byte[] as Bitmap in Android
How does Bitmap.Save(Stream, ImageFormat) format the data?
Copy image with alpha channel to clipboard with custom background color?
if you want to get each pdf page as independent bitmap you should consider that
VuDroid render the pages,
PDFView only display them.
you should use VuDroid functions.
now you can use this example and create your own codes
Example code : for make bitmap from a specific PDF page
view = (ImageView)findViewById(R.id.imageView1);
pdf_conext = new PdfContext();
PdfDocument d = pdf_conext.openDocument(Environment.getExternalStorageDirectory() + "your PDF path");
PdfPage vuPage = d.getPage(1); // choose your page number
RectF rf = new RectF();
rf.bottom = rf.right = (float)1.0;
Bitmap bitmap = vuPage.renderBitmap(60, 60, rf); //define width and height of bitmap
view.setImageBitmap(bitmap);
for writing this bitmap on SDCARD :
try {
File mediaImage = new File(Environment.getExternalStorageDirectory().toString() + "your path for save thumbnail images ");
FileOutputStream out = new FileOutputStream(mediaImage);
bitmap.compress(Bitmap.CompressFormat.JPEG, 90, out);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
for retrieve saved image:
File file = new File(Environment.getExternalStorageDirectory().toString()+ "your path for save thumbnail images ");
String path = file.getAbsolutePath();
if (path != null){
view = Bitmap.createScaledBitmap(BitmapFactory.decodeFile(path), YOUR_X, YOUR_Y, false);
}
Try this code to check whether bitmap is properly generating or not
PdfContext pdf_conext = new PdfContext();
PdfDocument d = (PdfDocument) pdf_conext.openDocument(pdfPath);
PdfPage vuPage = (PdfPage) d.getPage(0);
RectF rf = new RectF();
Bitmap bitmap = vuPage.renderBitmap(1000,600, rf);
File dir1 = new File (root.getAbsolutePath() + "/IMAGES");
dir1.mkdirs();
String fname = "Image-"+ 2 +".jpg";
File file = new File (dir1, fname);
if (file.exists ())
file.delete ();
try {
FileOutputStream out = new FileOutputStream(file);
bitmap.compress(Bitmap.CompressFormat.JPEG, 90, out);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
I would like to take a screenshot of a page displayed in a WebView. The page contains flash elements - and here is the problem. When I take a screenshot all the flash parts of the page are blank.
I am using this piece of code to take a screenshot:
WebView webView = (WebView) findViewById(R.id.webview);
Picture picture = webView.capturePicture();
Bitmap screenshot = Bitmap.createBitmap(picture.getWidth(),
picture.getHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(screenshot);
picture.draw(c);
File file = new File("/sdcard/screenshot.jpg");
FileOutputStream ostream = null;
try {
file.createNewFile();
ostream = new FileOutputStream(file);
screenshot.compress(CompressFormat.JPEG, 90, ostream);
Log.d("Test", "Screenshot taken");
} catch (Exception e) {
Log.e("Test", "Error", e);
} finally {
try {
ostream.close();
} catch (IOException ignore) {
}
}
I was also trying to acquire Bitmap of the screen contents using the solution given in this SO question:
View webView = findViewById(R.id.webview);
Bitmap bitmap = webView.getDrawingCache();
This also doesn't work - the result is the same (i.e. blank flash elements).
So the question is: How to take a screenshot of WebView contents also with flash elements?