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

Question

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

Answer 1

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

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

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

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

Answer 2

用html2canvas 或者其他类似的库。

import html2canvas from 'html2canvas';

html2canvas(document.body).then(function(canvas) {
  
  var dataUrl = canvas.toDataURL();
 
  window.open(dataUrl);
});