将 Android webview 渲染为位图、html5 javascript、回调问题 [英] Rendering Android webview to bitmap, html5 javascript , callback issue

问题描述

我有一个带有按钮、图像和网络视图的活动.我的目标是加载一个页面，然后在其上执行 javascript 以使用 HTML5 等绘制图形.

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.

html5 绘制的图片高度为 unknown/variable ，但宽度应始终与手机的宽度/或浏览器窗口相同.

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.

我有一个 javascript 接口来获取一个回调，其中包含它现在已经完成调用绘图函数的信息，它给了我高度.

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.

这里是网络视图的设置

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

            }
             });



        }

我的视图中的按钮，我曾经使用此功能将我的 webview 渲染为纹理:

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.

现在，我已经实现了从 javascript 获得的回调，如下所示:

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

       }

    }

而且每次，这个回调函数都会渲染一个白页.有趣的是，如果我在看到这个回调被调用时立即按下渲染到纹理按钮，它会显示预期的结果.是 runOnUiThread 以某种方式失败了吗?

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?

睡眠是我添加的内容，目的是查看 webview 渲染和我从 javascript 获得的回调是否存在某种有趣的延迟.

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.

我也尝试将 sleep 移动到 runOnUiThread 中，这也没有帮助.

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.

推荐答案

找到了解决办法，就是把renderCoupon改成这样:

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

当然，我在回调中删除了 Sleep 内容.感谢我的同事给我提示了这一点.:)

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

这篇关于将 Android webview 渲染为位图、html5 javascript、回调问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！