Generate Bitmap from HTML in Android

Generate bitmap from HTML in Android

A synchronous method that generates a bitmap from an HTML string using a WebView, and can be used within an AsyncTask:

public Bitmap getBitmap(final WebView w, int containerWidth, int containerHeight, final String baseURL, final String content) {
    final CountDownLatch signal = new CountDownLatch(1);
    final Bitmap b = Bitmap.createBitmap(containerWidth, containerHeight, Bitmap.Config.ARGB_8888);
    final AtomicBoolean ready = new AtomicBoolean(false); 
    w.post(new Runnable() {

        @Override
        public void run() {
            w.setWebViewClient(new WebViewClient() {
                @Override
                public void onPageFinished(WebView view, String url) {
                    ready.set(true);
                }
            });
            w.setPictureListener(new PictureListener() {
                @Override
                public void onNewPicture(WebView view, Picture picture) {
                    if (ready.get()) {
                        final Canvas c = new Canvas(b);
                        view.draw(c);
                        w.setPictureListener(null);
                        signal.countDown();
                    }
                }
            });
            w.layout(0, 0, rect.width(), rect.height());
            w.loadDataWithBaseURL(baseURL, content, "text/html", "UTF-8", null);
        }});
    try {
        signal.await();
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
    return b;
}

It has some limitations, but it's a start.

Android:how to convert html code into image and send this image using ShareIntent?

I have done this using webView.

webview = (WebView) findViewById(R.id.webView1);

WebSettings settings = webview.getSettings();
settings.setBuiltInZoomControls(true);
settings.setUseWideViewPort(false);
settings.setJavaScriptEnabled(true);
settings.setSupportMultipleWindows(false);

settings.setLoadsImagesAutomatically(true);
settings.setLightTouchEnabled(true);
settings.setDomStorageEnabled(true);
settings.setLoadWithOverviewMode(true);

WebView webview = (WebView) findViewById(R.id.webview);
WebView.enableSlowWholeDocumentDraw();

String RESULTDATA = "<html><body><h1>It's working</h1></body></html>";
if (!RESULTDATA.equals(null)) {
    Log.e("info", RESULTDATA);
    webview.loadData(RESULTDATA, "text/html", null);
}

circleButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {

        shareResultAsImage(webview);
    }
});

And shareResultAsImage(WebView) method need to define.

private void shareResultAsImage(WebView webView) {
    Bitmap bitmap = getBitmapOfWebView(webView);
    String pathofBmp = MediaStore.Images.Media.insertImage(getContentResolver(), bitmap, "data", null);
    Uri bmpUri = Uri.parse(pathofBmp);
    final Intent emailIntent1 = new Intent(android.content.Intent.ACTION_SEND);
    emailIntent1.setType("image/png");
    emailIntent1.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
    emailIntent1.putExtra(Intent.EXTRA_STREAM, bmpUri);

    startActivity(emailIntent1);
}

private Bitmap getBitmapOfWebView(final WebView webView) {
    Picture picture = webView.capturePicture();
    Bitmap bitmap = Bitmap.createBitmap(picture.getWidth(), picture.getHeight(), Bitmap.Config.RGB_565);
    Canvas canvas = new Canvas(bitmap);
    canvas.drawColor(Color.WHITE);
    picture.draw(canvas);
    return bitmap;
}

Creating Bitmap from Webview with content offscreen Android

You can set WebView height to wrap_contents, and it will resize itself to the content height.

You can still use PictureListener.onNewPicture() to receive a signal that WebView has drawn something. It is better than using onPageFinished(), as the latter only indicates that WebView has received all the page contents. The current status of PictureListener.onNewPicture() means that it's just not possible to obtain the picture from it, you need to use WebView.draw() as you are already doing.

Also, be aware that if your app is targeting L API level or above, you need to call WebView.enableSlowWholeDocumentDraw() prior to creating any WebViews in order to make it to draw the entire contents of WebView onto the canvas, see this.

Convert Android Base64 Bitmap and Display on HTML Base64 Image

I had a similar issue where I wanted to convert an Android generated BASE64 string to Binary with Javascript and atob function was keep giving me errors. My first guess was like yours to use URL_SAFE instead of DEFAULT, but none of them worked, then I figure it out that I need to use Base64.NO_WRAP method to get it working.
I tested Base64.NO_WRAP and displaying inline image and IT WORKED!!!!

Hope this save you some nerves, because I did had some till I figure it out how to do it.

So to give the nice answer, change: return Base64.encodeToString(bytes, Base64.URL_SAFE); to this: return Base64.encodeToString(bytes, Base64.NO_WRAP);

Generate Bitmap from HTML in Android