WebView.draw(android.graphics.Canvas)不会将HTML5画布绘制到android.graphics.Canvas

时间:2014-03-10 09:49:58

标签: android html5 canvas

嘿我正试图通过以下方式将webview绘制到位图:

CustomWebView webView = (CustomWebView) findViewById(R.id.chart_webview_renderer);

String capturePathString = Environment.getExternalStorageDirectory().getPath() + "/temp/ms_" + System.currentTimeMillis() + ".png";

Bitmap bm = Bitmap.createBitmap(webView.getMeasuredWidth(), webView.getMeasuredHeight(), Bitmap.Config.ARGB_8888);

Canvas bigcanvas = new Canvas(bm);
Paint paint = new Paint();
int iHeight = bm.getHeight();
bigcanvas.drawBitmap(bm, 0, iHeight, paint);
webView.draw(bigcanvas);

if (bm != null) {
    try {
        OutputStream fOut = null;
        File file = new File(capturePathString);
        fOut = new FileOutputStream(file);

        bm.compress(Bitmap.CompressFormat.PNG, 50, fOut);
        fOut.close();
        fOut.flush();
        bm.recycle();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

这在我们可用于测试的平板电脑上工作正常(Galaxy Tab 2和3)。但是在Sony Xperia Z和三星Galaxy S2上产生了正确大小的白色位图。

它试图绘制到位图的网页只包含一个HTML5画布,当我还添加普通的HTML时,它只会将该HTML绘制到位图中。

webview在所有视图后面都设置为不可见,但我尝试将其显示在所有视图之上,并且产生的结果没有任何不同。

1 个答案:

答案 0 :(得分:2)

我无法使用我使用的原始方法解决此问题。所以我将以下javascript修复程序添加到html:https://code.google.com/p/todataurl-png-js/以允许使用

canvas.toDataUrl() 

返回Base64编码的PNG图像。然后我用

WebView.addJavascriptInterface

允许javascript将base64编码的图像发送到java,然后将其保存在设备上。

我所做的一个粗略的例子是:

// After initializing the webview:
JavaScriptInterface jsInterface = new JavaScriptInterface();
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "android");

// The class used as javascript interface for saving the image to a file
public class JavaScriptInterface {
    @JavascriptInterface
    public void canvasToImage(String base64ImageData){
        String capturePathString = Environment.getExternalStorageDirectory().getPath() + "/temp/ms_" + System.currentTimeMillis() + ".png";

        try{
            File file = new File(capturePathString);
            file.getParentFile().mkdirs();
            FileOutputStream fos = new FileOutputStream(file);
            byte[] decodedString = android.util.Base64.decode(base64ImageData, android.util.Base64.DEFAULT);
            fos.write(decodedString);

            fos.flush();
            fos.close();
        }catch(Exception e){
            e.printStackTrace();
        }
    }
}

// In the javascript it looks something like this
function canvasToImage(){
    var dataUrl = canvas.toDataURL();

    window.android.canvasToImage(dataUrl.replace("data:image/png;base64,", ""));
}

它并不像我希望的那样干净,但它现在适用于所有设备!