Introduction: This article mainly tells about the following two aspects:

  1. ordinaryWebViewHow to capture a long graph
  2. forWebView in X5 kernelHow to capture a long graph

Capturing a long graph for a WebView is a common requirement in daily development. Smart programmers on the Internet provide a variety of methods to intercept WebView long graph, which provides a lot of convenience for our development. At present, there are also many apps that integrate X5 kernel, but there is little introduction of X5 kernel’s long graph scheme on the Internet. Therefore, HERE I have sorted out common and feasible methods of WebView’s long graph capturing, and shared the screenshot method of WebView using X5 kernel.

A, the commonWebViewTruncated graph scheme

A normal WebView captures a long graph, in this case without an integrated X5 kernel in the project. You can take screenshots using the API on Google Docs. Android5.0 as the version demarcation line, screenshots adopt different processing methods.

1. Android5.0 or later

/** * Take a screenshot of the WebView, using an outdated method, but it works on the current Android version ** @param WebView * @return
     */
    private static Bitmap captureWebViewKitKat(WebView webView) {
            Picture picture = webView.capturePicture();
            int width = picture.getWidth();
            int height = picture.getHeight();
            if (width > 0 && height > 0) {
                Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
                Canvas canvas = new Canvas(bitmap);
                picture.draw(canvas);
                return bitmap;
            }
            returnnull; }}Copy the code

2. Android5.0 or later

In Android5.0 and above, The WebView has been optimized to reduce memory usage and improve performance by only drawing the display part when loading a web page using the WebView. If we do nothing and still use the code screenshot above, we will only capture the WebView content displayed on the screen and leave the rest blank. . At that time, we by calling the WebView enableSlowWholeDocumentDraw () method can turn off this optimization, but note that this method need to call before WebView instance is created, there is no effect. So we add code before the WebView instance is created:

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        android.webkit.WebView.enableSlowWholeDocumentDraw();
    }Copy the code

According to the description in Google documentation, the use of capturePicture() method has been discouraged, it is recommended that we use webView onDraw(Canvas) to get the image, so here we go to get the width and height of the page, Call webView.draw(Canvas) method to generate webView screenshot.

    private void captureWebViewLollipop(WebView webView) {
        floatscale = webView.getScale(); int width = webView.getWidth(); Int height = (int) (webview.getcontentheight () * scale + 0.5); Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565); Canvas canvas = new Canvas(bitmap); webView.draw(canvas);return bitmap;
    }Copy the code

Second, X5 kernel interception long graph

There are two ways to capture a long graph using the X5 kernel, both version-free, which is convenient. Under the X5 kernel, WebView’s onDraw(Canvas) method is more or less problematic, so it is deprecated. Here are two screenshot methods:

1. Use the X5 kernel methodsnapshotWholePage(Canvas, boolean, boolean)

SnapshotWholePage (Canvas, Boolean, Boolean) has been provided in the X5 kernel to capture the entire WebView interface, but this method has the disadvantage that it does not capture the WebView at the width and height on the screen. It’s just WebView contentWidth and contentHeight screenshots, so the image is a bit less sharp, but it works fine as a thumbnail.

    private static Bitmap captureX5WebViewUnsharp(Context context, WebView webView) {
        if (webView == null) {
            return null;
        }
        if (context == null) {
            context = webView.getContext();
        }
        int width = webView.getContentWidth();
        int height = webView.getContentHeight();
        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
        Canvas canvas = new Canvas(bitmap);
        webView.getX5WebViewExtension().snapshotWholePage(canvas, false.false);
        return bitmap;
    }Copy the code

2. UsecapturePicture()Capture a clear long picture

Instead of using snapshotWholePage(), you can still use capturePicture() if you want to intercept long, clean images from under the X5 kernel. The X5 kernel uses capturePicture() to capture a long, clear WebView, but this is a Deprecated method and should be handled with exceptions.

Third, summary

The above is the summary and sharing of WebView long graph method. The screenshots of X5 kernel have also tried various ways and finally found a satisfactory solution. In addition, the truncated graph will take up a lot of memory and trigger OOM easily, so pay attention to OOM processing in the code.

In projects using the X5 kernel, the judgment logic for using WebView to intercept long graphs can be:

// if the X5 kernel is not in effect and The Android version is 5.0 or above, this is calledenableSlowWholeDocumentDraw() makes it easy to intercept long graphsif(! isX5Enabled() && Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { android.webkit.WebView.enableSlowWholeDocumentDraw(); } /* Create WebView * /... // Webpage screenshot public voidcaptureWholePage() { try { Bitmap bitmap = captureWebView(); / / Catch (OutOfMemoryError oom) {/ / Catch (OutOfMemoryError oom)}}Copy the code