WebView 生成长图,截图

关于 WebView 截图 网上已经有很多例子了,但是在研究使用的时候发现一些问题,在这记录一下,供大家参考。

首先是WebView 的截图,只能截取WebView 内显示的内容。大小也就是WebView 的大小,方法很简单,直接上代码。

private Bitmap captureWebView(WebView webView){
        Picture snapShot = webView.capturePicture();

        Bitmap bmp = Bitmap.createBitmap(snapShot.getWidth(), snapShot.getHeight(), Bitmap.Config.RGB_565);
        Canvas canvas = new Canvas(bmp);
        snapShot.draw(canvas);
        return bmp;
    }

之后就是整个WebView 生成的长图,先上代码。

private Bitmap captureWebViewLong(WebView webView){
        float scale = webView.getScale();
        int webViewHeight = (int) (webView.getContentHeight()*scale+0.5);
        Bitmap bitmap = Bitmap.createBitmap(webView.getWidth(),webViewHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        webView.draw(canvas);


        return bitmap;
    }

但是WebView在5.0之后更改了机制,如图

图内已经写的很清楚了

所以我们要先调用enableSlowWholeDocumentDraw() ,才能把整个网页的长图生成。这个enableSlowWholeDocumentDraw() 方法 需要在WebView声明之前调用,比如

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        WebView.enableSlowWholeDocumentDraw();

        setContentView(R.layout.activity_main);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSupportZoom(true); //支持缩放
        webView.requestFocusFromTouch();
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }


        });
        webView.loadUrl("http://www.baidu.com");

    }

上面的部分,其实有很多大神都说过了,就不在赘述了。

最后 还有一坑的地方,就是如果这个html页面里把 html标签 的高度写成100%像下面这样

<html style = "height: 100%;">

</html>

或者这样

/***********
这里是 css代码
************/

html {
  height: 100%;
}

如果html写成这样,那么就无法获取到整个html的高度也就无法生成长图,最后的效果跟截图的效果一样只能截取WebView 显示的部分。

完~~good 拜

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uni-app的webview中调用摄像头,你可以使用HTML5的`getUserMedia` API来实现。以下是一个示例代码: 1. 在uni-app的页面中,使用webview组件来加载一个包含调用摄像头功能的HTML页面: ```html <template> <view> <web-view :src="webViewUrl"></web-view> </view> </template> <script> export default { data() { return { webViewUrl: '' // webview打开的链接地址 }; }, mounted() { // 拼接成代码 const code = ` <video id="videoElement" autoplay></video> <button onclick="startCamera()">打开摄像头</button> <script> function startCamera() { navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { const videoElement = document.getElementById('videoElement'); videoElement.srcObject = stream; }) .catch(error => { console.log('无法访问摄像头: ', error); }); } </script>`; // 将代码传递给webview this.webViewUrl = `data:text/html;base64,${btoa(code)}`; } } </script> ``` 2. 在HTML页面中,通过按钮点击事件调用`startCamera`函数来打开摄像头,并将摄像头的视频流赋值给`<video>`标签的`srcObject`属性。 请注意,由于浏览器的安全策略限制,摄像头访问通常需要在HTTPS环境下才能正常工作。在本地开发环境下测试,可以使用`uni-server`来创建一个HTTPS的本地服务器。 另外,需要注意的是,webview组件在不同平台上的行为可能有所不同,特别是在移动设备上。请确保在目标平台上进行测试和适配。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值