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 长截图

    WebView本来自带capturePicture截图方法,但是在L后该方法被标记为废弃,虽然还能用,官方建议用o...

  • webView及ScrollView长截图

    前言 之前的文章已经讲了X5内核加入到项目中的方式,现在写一下如何在该内核下使用长截图,Android自带的web...

  • webView 截图

    最近项目有个 webView 里面截图的需求。记录一下。 通过上述代码截图后,发现一个问题。webView 里面截...

  • WebView截图

    初始化webview之前,不然截图只有当前显示的部分,其余为空白 截图调用

  • android搞个截图

    实现 1.单个view的截图2.webview的截长图3.scrollView的截图4.截屏 1.单个View的截...

  • iOS webView 截图

    pragma mark --------------------------------------------...

  • Andorid截图

    前言 最近项目里有用到截图,总结一些用法。 截图 获取View在屏幕可见区域的截图 webview截图 webvi...

  • iOS-webView截图

    开发中如何截图,webView为例,用法如下: (一)截取当前屏幕显示的区域(设备的全屏) 代码如下: (二)截取...

  • ios Webview截图总结

    对当前view可见区域截屏 关键api详细解 UIGraphicsBeginImageContextWithOpt...

  • Electron截图功能(webview)

    使用html2canvas遇到webview容易有跨域问题,所以使用原生capturePage方法

网友评论

    本文标题:WebView 长截图

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