5***@qq.com
5***@qq.com
  • 发布:2019-11-28 20:17
  • 更新:2023-06-12 09:34
  • 阅读:1323

#插件需求# APP截长图,整个页面,不仅仅是可视区域

分类:uni-app

插件需求# APP截长图,整个页面,不仅仅是可视区域

类似于html2canvas的插件

2019-11-28 20:17 负责人:无 分享
已邀请:
9***@qq.com

9***@qq.com

楼主解决了吗

  • 5***@qq.com (作者)

    我和你说下实现逻辑吧。1.根据需要截屏的页面,获取当前页面的节点信息,高度啥的idHeight;2.获取设备信息,得到windowHeight,状态栏高度h1,导航栏高度h2;3.根据idHeight和windowHeight可以计算得到总共能滚动多少屏;4.先将页面滚动到最上面,使用webview的截屏(draw)功能(top要去掉导航栏和状态栏的高度),并缓存base64图片对象,截完一屏滚动下一屏,一直滚完为止,可以得到所有的截屏图片base64对象;5.接下来就是根据得到的图片对象用canvans拼接了。搞完收工,目前代码没有抽出来,只能说下大概的逻辑

    2019-12-05 09:37

  • 9***@qq.com

    回复 5***@qq.com: 看着好复杂啊,我还是分享链接把

    2019-12-12 14:24

  • linyunlong

    回复 5***@qq.com: 您好,使用canvans拼接的时候需要使用到canvas.toDataURL()这个方法,在IOS下这个方法不生效,请问您是怎么解决这个问题的,在安卓下按照您的思路去截屏没哟任何问题

    2019-12-21 21:01

  • linyunlong

    回复 5***@qq.com: 已解决,感谢提供思路,原因是(var img = new Image(); img.src = imgBase64; ) img.src的值需要是图片base64数据,不能是图片的url,要不IOS对img.onload事件不生效

    2019-12-22 08:49

DCloud_UNI_GSQ

DCloud_UNI_GSQ

调用webview的截图方法,然后滚动再截图,用canvas拼接一下

  • 5***@qq.com (作者)

    是用的这种逻辑来的,看看官方是不是可以出个官方的api来实现,我看Android有bitmap图像缓存来实现长图的方式

    2019-12-05 09:30

  • linyunlong

    您好,使用canvans拼接的时候需要使用到canvas.toDataURL()这个方法,在IOS下这个方法不生效,请问您是怎么解决这个问题的,在安卓下按照您的思路去截屏没哟任何问题

    2019-12-21 21:01

  • linyunlong

    已解决,感谢提供思路,原因是(var img = new Image(); img.src = imgBase64; ) img.src的值需要是图片base64数据,不能是图片的url,要不IOS对img.onload事件不生效

    2019-12-22 08:49

DCloud_heavensoft

DCloud_heavensoft

比较靠谱的做法是自己获取数据,直接画在canvas上,然后生成图片。不要用截屏方案

  • 5***@qq.com (作者)

    有些区域是横向滚动的,靠获取数据的方式不一定合理,是滚动截屏的逻辑来写的,再结合canvans来实现的,代码比较繁琐,看之后又没时间抽出来,弄个插件啥的

    2019-12-05 09:28

俺铁牛

俺铁牛 - 这个人很懒,什么都没留下。

老胡,你回来了吗

原生插件开发哦

原生插件开发哦 - 插件开发 | 个人接单 | 已上线多个原生插件| iOS+Android |插件定制| 主页 https://ask.dcloud.net.cn/question/91948

插件可以做~ Q 1196097915

  • 俺铁牛

    大佬可以发布到插件市场里让更多的人购买使用。https://ext.dcloud.net.cn/

    2020-11-17 11:13

9***@qq.com

9***@qq.com

可以试试这个插件https://ext.dcloud.net.cn/plugin?id=12972

要回复问题请先登录注册