如何在Android Webview中捕获HTML5画布？

Question

I have a question. when I got a capture webview, canvas area are not captured in my tablet... but the content is fine. I don't understand... but weird thing is...

If i give option 'webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);' pen data(canvas) appear after save, but the drawing is really really slow...

It's my source..

@SuppressLint("SetJavaScriptEnabled")
private void setWebviewInit(WebView webview) {
    webview.setInitialScale(1);
    webview.getSettings().setJavaScriptEnabled(true);
    webview.getSettings().setUseWideViewPort(true);
    webview.getSettings().setLoadWithOverviewMode(true);

    webview.getSettings().setSupportZoom(true);
    webview.getSettings().setBuiltInZoomControls(true);
    webview.getSettings().setDisplayZoomControls(false);

    webview.setWebViewClient(webviewclient);
    webview.setWebChromeClient(new WebviewAlert());
    webview.setWebChromeClient(new ChromeClient(this));
    webview.addJavascriptInterface(new JIFace(), "ezandroid");
}

// capture

        WebView webview = arrWebView.get(0);

    webview.measure(MeasureSpec.makeMeasureSpec(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED),MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
    webview.layout(0, 0, webview.getMeasuredWidth(), webview.getMeasuredHeight());
    webview.setDrawingCacheEnabled(true);
    webview.buildDrawingCache();
    Bitmap bitmap = Bitmap.createBitmap(webview.getMeasuredWidth(), webview.getMeasuredHeight(),Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    int height = bitmap.getHeight();
    canvas.drawBitmap(bitmap, 0, height, paint);
    webview.draw(canvas);

    if(penBitmap != null){
        bitmap = combineBitmaps(bitmap, penBitmap, OVERLAY);
    }
    int fullHeight = webview.getMeasuredHeight();
    int pageHeight = (int) (1122*WEBVIEW_SCALE_RATE);
    int croppedStart = 0;

    int cnt;
    if(fullHeight == pageHeight){
        cnt =1;
    }else{
        cnt = (fullHeight / pageHeight) + 1;
    }

    ArrayList<String> localFilePath = new ArrayList<String>();

    for (int i = 0; i < cnt + 1; i++) { // 0: full Img, else: cropped
        Bitmap croppedBitmap = null;
        if (i!=cnt) {
            if ((croppedStart + pageHeight) > webview.getMeasuredHeight()) {
                int lastHeight = webview.getMeasuredHeight() - croppedStart;
                croppedBitmap = Bitmap.createBitmap(bitmap, 0, croppedStart, webview.getMeasuredWidth(),lastHeight-1);
            } else {
                try{
                croppedBitmap = Bitmap.createBitmap(bitmap, 0, croppedStart, webview.getMeasuredWidth(), pageHeight);
                }catch(Exception e){
                    e.printStackTrace();
                }
            }
            croppedStart += pageHeight;
        }
        if (bitmap != null) {
            try {
                String filePath = Environment.getExternalStorageDirectory().toString();
                OutputStream out = null;
                File file = new File(filePath, "test");
                if(!file.exists()){
                    file.mkdir();
                }
                out = new FileOutputStream(filePath + "/test/consentImg" + i + ".jpeg");
                localFilePath.add(filePath + "/test/consentImg" + i + ".jpeg");

                if(i==cnt){
                    bitmap.compress(Bitmap.CompressFormat.JPEG, 100, out);
                }else{
                    croppedBitmap.compress(Bitmap.CompressFormat.JPEG, 100, out);
                }

                if(croppedBitmap != null){
                    croppedBitmap.recycle();
                    croppedBitmap = null;
                }
                out.flush();
                out.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
    bitmap.recycle();

Answer 1

You need to call WebView.enableSlowWholeDocumentDraw() before creating any WebViews.

@Override
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        WebView.enableSlowWholeDocumentDraw();
    }
    ...
    setContentView(layout);
    ...
    ...
}

Answer 2

Simply adding WebView.enableSlowWholeDocumentDraw() is not enough, I still got blank images saved to my sd card. After a good amount of googling I found the solution. You need to disable hardware acceleration for the webview, like this:

mWebview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Answer 3

UnSolved. when saving, I make an image then I put it on the background of webview...

Answer 4

the problem is with hardware acceleration.
turning it off should work.

<application android:hardwareAccelerated="false">