Capturing android webview image and saving to png/jpeg

Question

I'm trying to implement the css3 page flip effect on a android/phonegap app. To do this, I need to dynamically save the current webview to png or jpeg so that it can be loaded to a div in the page flip html. I noticed the Picture class in android's docs but I'm not sure if that can be converted and saved. Could this be done through JS? Any ideas?

thanks

Solution 1

Try following code for capturing webview and saved jpg to sdcard.

webview.setWebViewClient(new WebViewClient() {

    @Override
    public void onPageFinished(WebView view, String url) {
        Picture picture = view.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( "/sdcard/"  + "page.jpg" );
            if ( fos != null ) {
                b.compress(Bitmap.CompressFormat.JPEG, 90, fos );
                fos.close();
            }
        } 
        catch( Exception e ) {
            System.out.println("-----error--"+e);
        }
    }
});

webview.loadUrl("http://stackoverflow.com/questions/15351298/capturing-android-webview-image-and-saving-to-png-jpeg");

Solution 2

The easiest way (to my knowledge) to capture a View as an image is to create a new Bitmap and a new Canvas. Then, simply ask your WebView to draw itself on your own Canvas instead of the Activity's default one.

Pseudocode:

Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
myWebView.draw(canvas);
//save your bitmap, do whatever you need

Comments

[user1776524]

ok, I'll give that a shot. Do you know how I could implement that in javascript? Would writing a java class and using appView.addJavascriptInterface() work?

[wsanville]

Exactly, you will need to call back into Java land to get this done.