持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 4 天，点击查看活动详情

00、前言

在混合开发中，截取长图也是常见的需求。例如在 H5 页面展示了一张宣传海报，用户可以长按保存后分享。而因为 H5 本身并非只是一张图片，我们无法通过保存图片的方式进行保存。因此就需要进行截长图的方式来实现这一需求。

01、截长图

方法 1

fun getX5WebViewBtpBase64Str(webView: WebView?): Bitmap? {
    if (webView == null) {
        return null
    }
    val wholeWidth = webView.contentWidth
    val wholeHeight = webView.contentHeight
    val x5bitmap = Bitmap.createBitmap(wholeWidth, wholeHeight, Bitmap.Config.ARGB_8888)
    val x5canvas = Canvas(x5bitmap)
    if (webView.x5WebViewExtension == null) {
        return null
    }
    val ix5WebViewExtension = webView.x5WebViewExtension
    ix5WebViewExtension.snapshotWholePage(x5canvas, false, false)
    return Bitmap.createBitmap(x5bitmap)
}

一开始采用上面的，截出的图比较模糊，尽管我们使用的是 Bitmap.Config.ARGB_8888 。当时想着长图上的内容，也能看得清楚，应该不影响。便打算交付了。结果发现长图中还附有一个二维码。因为太模糊，导致二维码无法被正常识别，所以得另寻出路了。

如果对于清晰度没有太高的要求，可以直接使用上面的方法。

方法 2

于是，通过查询资料和与同时使用 X5 内核的同行沟通后，找到了下面可以得到清晰长图的截图方式。

fun getHDMIPic2(webView: WebView?): Bitmap? {
    if (webView == null) {
        return null
    }
    val wholeWidth = webView.computeHorizontalScrollRange()// 注释 1
    val wholeHeight = webView.computeVerticalScrollRange()// 注释 2
    val x5bitmap = Bitmap.createBitmap(wholeWidth, wholeHeight, Bitmap.Config.ARGB_8888)
    val x5canvas = Canvas(x5bitmap)
    x5canvas.scale( // 注释 3
        wholeWidth.toFloat() / webView.contentWidth.toFloat(),
        wholeHeight.toFloat() / webView.contentHeight.toFloat()
    )
    if (webView.x5WebViewExtension == null) {
        return null
    }  
    val ix5WebViewExtension = webView.x5WebViewExtension
    ix5WebViewExtension.snapshotWholePage(x5canvas, false, false)
    return x5bitmap
}

方法 1 和 方法 2 主要的区别在于三个注释。

注释 1 和注释 2 获取的总长度是 webview 的横纵坐标可以滚动范围的长度。不过一般来说横向我们是不允许滚动的。然后在注释 3 处，将画面进行按比例放大。这样就可以得到清晰的长图了

03、结语

本文主要是提供了具体业务的两种解决方案，希望能帮助到大家解决相关的问题。同时，也欢迎大家在评论区，交流更多的方案或者疑惑。

我是 Quincy-Ye, “一个不会英语的写作者，不是一个好的程序员。”

【Android】混合开发 - X5WebView 截清晰长图

00、前言

01、截长图

方法 1

方法 2

03、结语