Rendering Android webview to bitmap, html5 javascript , callback issue

android, html, javascript, webview

Solution

Found a solution, which was to change the renderCoupon to this:

void renderCoupon(final int width,final int height){

    mWeb.postDelayed(new Runnable() {

        @Override
        public void run() {
            // TODO Auto-generated method stub
            bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
            final Canvas c =new Canvas(bitmap);
            mWeb.draw(c);

            imgView.setMinimumWidth(width);
            imgView.setMinimumHeight(height);
            imgView.setImageBitmap(bitmap);
            imgView.setVisibility(View.VISIBLE);
        }
    }, 100);
}

And of course I removed the Sleep stuff in my callback. Thanks to my collegue who tipped me about this. :)

Problem

I have an activity with a button and an image and a webview. My goal is to load a page, then execute javascript on it to draw graphics using HTML5 etc. The height of the image drawn by the html5 is unknown/variable , but the width should always be the same as the phone's width/or browser window. I have a javascript interface to get a callback containing info that it has now finished calling the drawing function, and it is giving me the height. Here is the setup of the web-view ``` mWeb = (WebView) findViewById(R.id.webView1); mWeb.clearCache(true); mWeb.addJavascriptInterface(new IJavascriptHandler(), "cpjs"); mWeb.getSettings().setJavaScriptEnabled(true); mWeb.loadUrl(" http://theURL.com "); mWeb.setInitialScale(100); mWeb.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR); mWeb.setWebViewClient(new WebViewClient() { public void onPageFinished(WebView view, String url){ mWidth = mWeb.getWidth(); mHeight = mWeb.getHeight(); view.loadUrl("javascript: Tools.adjustWidth(" + mWidth + " )"); String javaCouponRender = "renderCoupon(" + kupongJson + ", 0); void(0)"; view.loadUrl("javascript: " + javaCouponRender); } }); } ``` And the button I have in my view, I have used to initiate render my webview to a texture with this function: ``` void renderCoupon(int width,int height){ bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); final Canvas c =new Canvas(bitmap); mWeb.draw(c); imgView.setMinimumWidth(width); imgView.setMinimumHeight(height); imgView.setImageBitmap(bitmap); imgView.setVisibility(View.VISIBLE); } ``` This works. Pressing the button, renders the drawn content to the texture and the imageview has a correct result. The only cavaet is I have to wait until the page has loaded/drawn before pressing the button. Now, I have implemented the callback I get from javascript like this: ``` final class IJavascriptHandler { IJavascriptHandler() { } public void couponRenderedCallback(final int height){ mHasGotRenderCallback = true; mHeight = height; Toast t = Toast.makeText(getApplicationContext(), "see if it helps sleeping", 2000); t.show(); try{ Thread.sleep(5000); } catch(InterruptedException ex){ } runOnUiThread(new Runnable() { @Override public void run() { Toast t2 = Toast.makeText(getApplicationContext(), "and now we render to texture", 2000); t2.show(); renderCoupon(mWidth, mHeight); } }); } } ``` And every time, this callback function renders a white page. The funny thing is that if I physically press the render-to-texture button as soon as I see this callback is called, it shows the expected result. Is it runOnUiThread that is failing somehow? The sleep is something I added to see if there was some sort of funny delay of the webview rendering and the callback I get from javascript. I have also tried moving the sleep into the runOnUiThread , which also did not help. I hope someone knows in what direction I should look to solve this problem. Any help is appreciated.

Original source