WebView 长截图

作者: act262 | 来源:发表于2017-10-11 16:16 被阅读96次

    WebView本来自带capturePicture截图方法,但是在L后该方法被标记为废弃,虽然还能用,官方建议用onDraw去替代实现。
    WebView的长截图是从顶部开始到页面的最底部,即使是当前没有展示出来的地方也会算进去,所以页面越长,截图也越长,占用内存也会越大,而且不能指定缩放度来减小内容占用。对于一些页面的特殊布局效果可能有所偏差,比如底部悬浮块,在截图中不会放在最底部,而是直接在第一屏高度的底部位置,所以需要2端特殊处理。

    // API 21+ 截长图需要设置,必须在WebView初始化之前调用
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        WebView.enableSlowWholeDocumentDraw();
    }
    
    public class WebUtils {
    
        /**
         * 注意getContentHeight,capturePicture只能在UI线程调用,而绘制Bitmap是耗时操作
         */
        public static Bitmap captureWebView(WebView webView) {
            Bitmap bitmap;
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                int height = (int) (webView.getContentHeight() * webView.getScale());
                int width = webView.getMeasuredWidth();
                bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
                Canvas canvas = new Canvas(bitmap);
                webView.draw(canvas);
            } else {
                Picture picture = webView.capturePicture();
                bitmap = Bitmap.createBitmap(picture.getWidth(), picture.getHeight(), Bitmap.Config.RGB_565);
                Canvas canvas = new Canvas(bitmap);
                picture.draw(canvas);
            }
            return bitmap;
        }
    
       /**
         * WebView长截图:
         * 必须在UI线程调用,返回结果在子线程操作,绘制Bitmap是耗时操作
         * <br/>
         * 这里不限制图片大小,因为在有些手机全屏大小,有些手机会压缩大小。
         * 用完图片需要回收,占用内存较大。
         */
        @UiThread
        public static Callable<Bitmap> capture(final WebView webView) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                final int height = (int) (webView.getContentHeight() * webView.getScale());
                final int width = webView.getMeasuredWidth();
    
                return new Callable<Bitmap>() {
                    @WorkerThread
                    @Override
                    public Bitmap call() throws Exception {
                        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
                        Canvas canvas = new Canvas(bitmap);
                        //noinspection WrongThread
                        webView.draw(canvas);
                        return bitmap;
                    }
                };
            } else {
                final Picture picture = webView.capturePicture();
                final int width = picture.getWidth();
                final int height = picture.getHeight();
    
                return new Callable<Bitmap>() {
                    @WorkerThread
                    @Override
                    public Bitmap call() throws Exception {
                        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
                        Canvas canvas = new Canvas(bitmap);
                        picture.draw(canvas);
                        return bitmap;
                    }
                };
            }
        }
    
    }
    
    // 在主线程执行
    final Callable<Bitmap> capture = WebUtils.capture(mWebView);
    Callable callable = new Callable<File>() {
                    @Override
                    public File call() throws Exception {
                        File dir = StorageUtils.getAppImagesDir(getContext());
                        File file = FileUtils.createJpegImage(dir, "Capture");
                        FileUtils.saveBitmap(capture.call(), file);
                        return file;
                    }
    
    // 在子线程调用callable.call
    因为是耗时操作,所以最好在操作时加个loading效果。
    

    具体例子

    这里除了对WebView页面进行长截图后,还要对这个图片进行处理,比如在头部拼接头部内容,在尾部再拼接尾部内容,还有图片压缩等等。

        public void captureWebView() {
            final Callable<Bitmap> captureCallable = WebUtils.capture(mWebView);
            Observable.fromCallable(captureCallable)
                    .subscribeOn(Schedulers.io())
                    .observeOn(Schedulers.io())
                    .map(new Function<Bitmap, File>() {
                        @Override
                        public File apply(@NonNull Bitmap bitmap) throws Exception {
                            // 1.先保存压缩体积后的文件
                            File dir = StorageUtils.getAppImagesDir(getContext());
                            File file = FileUtils.createJpegImage(dir, "Capture-Origin-");
                            FileUtils.saveBitmapToFile(file, bitmap, 5000); // max size 5Mb
                            return file;
                        }
                    })
                    .map(new Function<File, Bitmap>() {
                        @Override
                        public Bitmap apply(@NonNull File file) throws Exception {
                            // 2.压缩宽高大小,减少内存占用
                            Bitmap contentBmp = BitmapUtils.compress(file.getAbsolutePath(), 1080, 1920 * 8);
                            // 拼接图片,不先保存文件再解码才拼接
                            Rect outRect = new Rect();
                            Bitmap headerBmp = generateHeader(getContext(), outRect, title);
                            Bitmap footerBmp = BitmapFactory.decodeResource(getResources(), R.mipmap.img_footer);
                            Bitmap composedBmp = ShareImageUtils.composeImage(contentBmp, headerBmp, footerBmp);
    
                            contentBmp.recycle();
                            headerBmp.recycle();
                            footerBmp.recycle();
    
                            return composedBmp;
                        }
                    })
                    .map(new Function<Bitmap, File>() {
                        @Override
                        public File apply(@NonNull Bitmap bitmap) throws Exception {
                            // 3.保存合成压缩后的文件
                            File dir = StorageUtils.getAppImagesDir(getContext());
                            File file = FileUtils.createJpegImage(dir, "Capture-composed-");
                            FileUtils.saveBitmapToFile(file, bitmap, 5000);
                            return file;
                        }
                    })
                    .observeOn(AndroidSchedulers.mainThread())
                    .subscribe(new DisposableObserver<File>() {
                        @Override
                        protected void onStart() {
                            showLoadingView();
                        }
    
                        @Override
                        public void onNext(@NonNull File file) {
                            if (file != null) {
                                CaptureShareDialog.showDialog(getFragmentManager(), file);
                            }
                        }
    
                        @Override
                        public void onComplete() {
                            hideLoadingView();
                        }
    
                        @Override
                        public void onError(@NonNull Throwable e) {
                            hideLoadingView();
                        }
                    });
        }
    

    参考文章

    https://stackoverflow.com/questions/20942623/which-can-replace-capturepicture-function/20963109#20963109

    相关文章

      网友评论

        本文标题:WebView 长截图

        本文链接:https://www.haomeiwen.com/subject/uforextx.html