安卓使用webView一鍵截長圖寬圖

專案中webView要截圖，但是不同手機又不能滿足截圖需要，

增加一個 “截圖” 功能! 可以擷取 超出螢幕的長圖和寬圖

效果圖

• honor 6x的橫屏的下不支援截長圖 (原表格內容是可上下左右滑動的)

• 點選上圖"一鍵截圖" 截到的圖

• 截圖後分享到微信(以上貼圖是壓縮後的效果,原圖是比較清晰的)

WebActivity

...
var webSettings = webView!!.settings
            webSettings.
 
userAgentString = WebUI.UA
            webSettings.layoutAlgorithm = WebSettings.LayoutAlgorithm.SINGLE_COLUMN
            webSettings.javaScriptEnabled = true
            webSettings.domStorageEnabled = true
            webSettings.builtInZoomControls = true
            webSettings.setSupportZoom(true
 
)
            webSettings.loadWithOverviewMode = true
            webSettings.displayZoomControls = false;
            webView.setOnLongClickListener { true }
webView!!.webChromeClient = object : WebChromeClient() {
    override fun onProgressChanged(view: WebView, newProgress: Int) {
        ...
    }
 

    
    override fun onJsAlert(view: WebView?, url: String?, message: String?, result: JsResult?): Boolean {
        result?.confirm()
        return true
    }
    
    override fun onJsPrompt(webView: WebView, url1: String, message: String, defaultValue: String, result: JsPromptResult): Boolean {
        "capture" -> {
            //從接收到webview的寬高參數
            var width = obj.getString("width").toFloat()
            var height = obj.getString("height").toFloat()
            captureWholePage(SysUtil.px2dp(this@WebUI, width),SysUtil.px2dp(this@WebUI, height))
                      }
    }
    
}


/**
  * 截圖
  */
private fun captureWholePage(width: Int, height: Int) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        try {
            var bitmap = captureWebViewLollipop(webView, width, height)
            //4.4的截圖方法測試過,高版本也可以使用但是已經被標為廢棄不推薦了
            //var bitmap = captureWebViewKitKat(webView)
            if (bitmap != null) {
                shareCapture(bitmap)
            } else {
                SmartToast.showInCenter("生成圖片出錯")
            }
        } catch (oom: OutOfMemoryError) {
            SmartToast.showInCenter("OutOfMemoryError")
        }

    } else {
        SmartToast.showInCenter("當前手機版本過低,不支援截圖功能")
    }

}

/**
  * 5.0以上截長圖
  */
private fun captureWebViewLollipop(webView: WebView, height: Int): Bitmap {
    webView.measure(View.MeasureSpec.makeMeasureSpec(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED),
                    View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
    webView.layout(0, 0, webView.measuredWidth, height)
    webView.isDrawingCacheEnabled = true;
    webView.buildDrawingCache()
    var longImage = Bitmap.createBitmap(webView.measuredWidth, webView.measuredHeight, Bitmap.Config.ARGB_8888)
    var canvas = Canvas(longImage)
    webView.draw(canvas)
    return longImage
}

/**
  * 截圖 4.4
  */
private fun captureWebViewKitKat(webView: WebView): Bitmap? {
        //獲取Picture物件
        var picture = webView.capturePicture()
        //得到圖片的寬和高（沒有reflect圖片內容）
        var width = picture.width
        var height = picture.height
        if (width > 0 && height > 0) {
            //建立點陣圖
            var bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
            var canvas = Canvas(bitmap)
            //繪製(會呼叫native方法，完成圖形繪製)
            picture.draw(canvas)
            return bitmap
        }
        return null
    }


/**
  * 分享到微信,使用第三方shareSDk
  */
private fun shareCapture(bitmap: Bitmap) {
        var uri = Uri.parse(MediaStore.Images.Media.insertImage(contentResolver, bitmap, null, null));
        val imgPath= getRealFilePath(this,uri)
//        系統的分享到微信會壓縮導致檢視圖片不能顯示"檢視原圖"
//        var intent = Intent(Intent.ACTION_SEND)
//        intent.type = "image/jpeg"
//        intent.putExtra(Intent.EXTRA_STREAM, uri)
//        startActivity(Intent.createChooser(intent, "分享"));

        var oks = OnekeyShare();
        oks.disableSSOWhenAuthorize();
        oks.setImagePath(imgPath)
        oks.show(this)
    
}

/**
  * 根據Uri獲取真實圖片路徑
  *
  *
  * 一個android檔案的Uri地址一般如下：
  * content://media/external/images/media/62026
  *
  * @param context
  * @param uri
  * @return
  */
fun getRealFilePath(context: Context, uri: Uri?): String? {
    if (null == uri) return null
    val scheme = uri!!.scheme
    var data: String? = null
    if (scheme == null)
    data = uri!!.path
    else if (ContentResolver.SCHEME_FILE == scheme) {
        data = uri!!.path
    } else if (ContentResolver.SCHEME_CONTENT == scheme) {
        val cursor = context.contentResolver.query(uri, arrayOf(MediaStore.Images.ImageColumns.DATA), null, null, null)
        if (null != cursor) {
            if (cursor!!.moveToFirst()) {
                val index = cursor!!.getColumnIndex(MediaStore.Images.ImageColumns.DATA)
                if (index > -1) {
                    data = cursor!!.getString(index)
                }
            }
            cursor!!.close()
        }
    }
    return data
}
    
    

Web頁面

預設載入的 meta

<meta name="viewport" content="width=device-width, initial-scale=1">

增加一個方法改造成獲取 initial-scale

<script>
   ;(function () {
    //這裡頁面內容的寬度為960px
    var scale = (screen.width / 960).toFixed(2);
    document.write('<meta name="viewport" content="width=device-width, initial-scale=' + scale + ', maximum-scale=1, user-scalable=no>')
})();
</script>

• 根據自己頁面內容的寬度調整被除數, 截圖出來的寬度就是佔滿的