将Android WebView渲染为位图，涉及HTML5 JavaScript，回调问题。

Question

我有一个带有按钮、图片和Webview的活动页面。 我的目标是加载一个页面，然后执行其中的javascript来使用HTML5等绘制图形。

由于html5绘制的图片高度未知或变量，但其宽度应始终与手机宽度或浏览器窗口相同。

我有一个javascript接口，可以获取一个回调来包含信息，它现在已经完成调用绘图函数，并且正在给我返回高度。

以下是Webview的设置。

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);

            }
             });



        }

我在视图中有一个按钮，我使用以下函数来初始化将我的Web视图渲染到纹理：

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);
}

这个可以正常工作。按下按钮后，将绘制的内容渲染到纹理上，图像视图会得到正确的结果。唯一需要注意的是，在按下按钮之前必须等待页面加载/绘制完成。

现在，我已经按照以下方式实现了从JavaScript获得的回调：

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);
                    }
                });

       }

    }

每次调用回调函数时，都会呈现一个白色页面。有趣的是，如果我在看到调用此回调时立即物理按下渲染到纹理按钮，则会显示预期结果。是runOnUiThread出了问题吗？

我添加了sleep以查看Webview渲染和来自JavaScript的回调是否存在某种有趣的延迟。

我还尝试将sleep移动到runOnUiThread中，但也没有帮助。

我希望有人知道我应该朝哪个方向解决这个问题。感谢任何帮助。

- havchr

Answer 1

我找到了一个解决方案，就是将renderCoupon更改为以下内容：

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);
}

当然，我在回调函数中删除了Sleep的内容。感谢我的同事向我提供了这个提示。 :)

- havchr