前端点击分享实现截长图怎么实现?

作者站长头像
站长
· 阅读数 10

前端点击分享实现截长图怎么实现?页面是个H5网页,但是分享图标是原生app自带的,怎么实现呢?是H5这边把网页截下来传递给App吗?

回复
1个回答
avatar
test
2024-07-01

我理解为你是 Hybird 混合开发,原生部分提供了一个标题栏、右上角有个分享按钮之类的,然后下面是一个 WebView 嵌入的你的 H5 页面,现在希望点了原生的分享按钮,能把你的 WebView 长截图然后调第三方 SDK 分享图片出去,是这个意思吧?

如果是你来做长截图,那就首先需要 H5 跟 App 部分的能通信,无论 JSBridge 还是什么其他方案,总之你得先能通信。然后你 H5 暴露一个方法给 App,用于生成长截图的;同时原生也要暴露一个方法或者回调给你,用于你把生成的图片传回去的。

不过需要注意一点,因为 JSBridge 天然的限制,彼此通信的参数第一得是字符串、第二不能太长。前者你可以 Base64 编码解决;后者的话如果你的截图太大你就只能分片传输了 —— 可以约定好每个分片传多大、每个分片的上传顺序、何时通知原生分片全部都传输完毕了等等,原生拿到所有分片后先拼在一起再 Base64 解码。

其实更简单的方式是让原生 App 的同事来实现这个功能。一般都是先动态计算 WebView 内容高度,然后 capture 变成 Bitmap 即可。无论 Android 还是 iOS 都有这样的能力。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容