登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

查看: 183|回复: 6

Android使用WebView实现截图分享功能,android webview

[复制链接]

424

主题

829

帖子

1945

安币

手工艺人

发表于 2018-5-16 14:13:21 | 显示全部楼层 |阅读模式

            

        在app项目的开发过程中,经常会用到分享图片的功能,有时候还需要根据当前用户信息获取指定的分享图片,比如要求在用户分享图中显示用户名、uid、用户头像等信息。想到的实现方法主要有两点:

        1.通过android sdk自带的canvas方法进行绘制。
2.通过webview实现客户端与h5交互,然后将h5界面做截图处理。

        本文主要介绍第二种方式的实现过程,第一种方式的实现方法,后续有时间会在博客中做说明,下面开始本文内容。
首先确定我们要实现的逻辑:

        1.客户端与h5的交互,客户端将用户信息(用户名、uid、用户头像等)发送给h5;

        2.客户端截取webview功能的实现;

        3.分享功能的添加。

        1.客户端与h5交互

        在界面布局中添加webview布局,对webview布局进行初始化操作(此处需要网络权限,不做单独处理)

        wv_imgweb = (webview) findviewbyid(r.id.h5_wv_imgweb);

        

[Java] 查看源文件 复制代码
websettings websettings = wv_imgweb.getsettings();
//此处可更加具体的h5界面功能进行相应的websettings设置,本文只是演示基本效果
    websettings.setjavascriptenabled(true);
    websettings.setsupportzoom(false); 
    wv_imgweb.requestfocusfromtouch();
    wv_imgweb.setdrawingcacheenabled(true);
    wv_imgweb.setverticalscrollbarenabled(false);
    wv_imgweb.sethorizontalscrollbarenabled(false);
    wv_imgweb.setverticalscrollbaroverlay(false);
    wv_imgweb.sethorizontalscrollbaroverlay(false);
    wv_imgweb.setwebviewclient(new webviewclient() {
      @override
      public boolean shouldoverrideurlloading(webview view, string url) {
        view.loadurl(url);
        return true;
      }

      @override
      public void onpagefinished(webview view, string url) {
        super.onpagefinished(view, url);
        //加载逻辑的处理
      }

      @override
      public void onpagestarted(webview view, string url, bitmap favicon) {
        super.onpagestarted(view, url, favicon);
        //加载逻辑的处理
      }
    });

//添加用户信息参数,加载h5分享地址
wv_imgweb.loadurl(h5_url);

        2.截图功能的实现

        上文中的webview页面加载完成后,即可调用截图功能,并将图片保存在本地指定文件夹(此处需要存储权限,不做单独处理)
android中webview可以通过多种方式实现截图,下面分别做不同介绍:

        2.1截取屏幕内内容

        第一种方式是通过bitmap bitmap = webview.getdrawingcache()截取屏幕内显示内容,注意调用此方法setdrawingcacheenabled(true)必须设置为true;

        2.2截取整个webview内容

        第二种方式是通过picture snapshot = wv_imgweb.capturepicture()来截取整个webview的内容

[Java] 查看源文件 复制代码
picture snapshot = wv_imgweb.capturepicture();
if (snapshot != null && snapshot.getwidth() > 0 && snapshot.getheight() > 0) {
   bitmap bitmap = bitmap.createbitmap(snapshot.getwidth(), snapshot.getheight(), bitmap.config.argb_8888);//设置相应的图片质量
   canvas canvas = new canvas(bitmap);
   snapshot.draw(canvas);
//将截取的图片保存到本地
try {
   file appfile = new file(environment.getexternalstoragedirectory() + "/testpic/app");
   if (!appfile.exists() && !appfile.isdirectory()) {
     appfile.mkdirs();
   }
   string filename = environment.getexternalstoragedirectory().getpath() + "/testpic/app/share.jpg";
   fileoutputstream fos = new fileoutputstream(filename);
   //设置保存本地图片质量
   bitmap.compress(bitmap.compressformat.jpeg, 70, fos);
   fos.close();
   } catch (exception e) {
     uiutils.setloginfo("eee", e.getmessage());
   }
}

        2.3截取整个webview内容

        android 为了提高各方面的绘制速度(如滚动操作),为每一个 view 建立一个缓存,使用 view.builddrawingcache 为自己的 view 建立相应的缓存, 这个 cache 就是一个 bitmap 对象。利用这个功能可以对整个屏幕视图进行截屏并生成 bitmap ,也可以获得指定的 view 的 bitmap 对象。

[Java] 查看源文件 复制代码
wv_imgweb.measure(view.measurespec.makemeasurespec(view.measurespec.unspecified, view.measurespec.unspecified),
        view.measurespec.makemeasurespec(0, view.measurespec.unspecified));
    wv_imgweb.layout(0, 0, wv_imgweb.getmeasuredwidth(), wv_imgweb.getmeasuredheight());
    wv_imgweb.setdrawingcacheenabled(true);
    wv_imgweb.builddrawingcache();
    bitmap longimage = bitmap.createbitmap(wv_imgweb.getmeasuredwidth(),
        wv_imgweb.getmeasuredheight(), bitmap.config.argb_8888);

    canvas canvas = new canvas(longimage); // 画布的宽高和 webview 保持一致
    paint paint = new paint();
    canvas.drawbitmap(longimage, 0, wv_imgweb.getmeasuredheight(), paint);
    wv_imgweb.draw(canvas);
    //将截取的图片保存到本地
    try {
      file appfile = new file(environment.getexternalstoragedirectory() + "/testpic/app");
      if (!appfile.exists() && !appfile.isdirectory()) {
        appfile.mkdirs();
      }
      string filename = environment.getexternalstoragedirectory().getpath() + "/testpic/app/share.jpg";
      fileoutputstream fos = new fileoutputstream(filename);
      longimage.compress(bitmap.compressformat.jpeg, 70, fos);
      fos.close();
    } catch (exception e) {
      uiutils.setloginfo("eee", e.getmessage());
    }

        问题:在5.0+上会发现,截取的快照只显示了webview中显示出来的那部分,没有显示出来的部分是空白的。通过google找到了原因,在5.0+版本上,android对webview做了优化,旨在减少内存占用以提高性能。因此在默认情况下会智能的绘制html中需要绘制的部分,其实就是当前屏幕展示的html内容,因此会出现未显示的图像是空白的。解决办法是调用enableslowwholedocumentdraw()方法。这个方法需要在webview创建之前调用,在activity里就是在setcontentview前去调用,此方法会有显著的性能开销。

        3.分享图片

        通过原生或第三方分享功能,将上述生成的图片添加到代码中,完成分享。
如果有不同的见解,欢迎留言指正。






        

502

主题

926

帖子

2055

安币

手工艺人

发表于 2018-5-16 14:20:33 | 显示全部楼层
楼主威武,以后多发干货,多办活动~!

14

主题

1万

帖子

3912

安币

码皇(巴士元老)

Rank: 8Rank: 8

发表于 2018-5-16 14:54:38 | 显示全部楼层
每次我都积极回帖的,想要安币~

27

主题

9448

帖子

1888

安币

Android大神

Rank: 6Rank: 6

发表于 2018-5-16 17:52:32 | 显示全部楼层
感谢分享,安卓巴士有你更精彩:lol
发表于 2018-5-16 22:33:38 | 显示全部楼层
感谢分享,安卓巴士有你更精彩:lol

0

主题

9241

帖子

2485

安币

Android大神

Rank: 6Rank: 6

发表于 2018-5-17 02:56:52 | 显示全部楼层
每次我都积极回帖的,想要安币~

21

主题

9245

帖子

2063

安币

Android大神

Rank: 6Rank: 6

发表于 2018-5-17 08:11:16 | 显示全部楼层
帮帮顶顶!!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站长推荐

通过邮件订阅最新安卓weekly信息
上一条 /4 下一条

下载安卓巴士客户端

全国最大的安卓开发者社区
联系我们
关闭
合作电话:
15618560077
Email:
805941275@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表