如何获取分享h5页面时的缩略图

最近产品提了一个需求,在分享应用内h5页面时,不能像以前一样,使用应用的图标作为分享的缩略图,要使用H5页面内的一张图片作为缩略图进行分享。

我调查了一下市面上一些常见应用的做法,基本上可以总结出三种做法:

第一种方法:H5页面内指定分享图片地址

比较常见的做法是,在h5页面内定义一个JS的全局变量或者json,指定分享用的图片地址,APP内,通过JavaScriptCore获取全局变量,然后用于分享。

具体这样做的应用有:Keep,哔哩哔哩(部分页面),京东(部分页面)

还有一种是把分享的信息定义在页面头部(head标签里),QQ音乐就是这样做的。

第二种做法:固定分享页面内第一张符合条件的图片

如果H5页面是第三方提供,就不能通过第一种方法去指定分享内容了。这种情况下,大多数应用的做法就是取页面内第一张符合大小的图片作为分享图片。

这里我写了一个JS函数,只要把这个函数注入到H5页面中,APP就可以通过调用这个方法来获取到第一张符合大小的图片。

1
2
3
4
5
6
7
8
9
10
11
function getImage(width, height) {
var images = document.getElementsByTagName('img');
for (var index = 0; index < images.length; index++) {
var img = images[index];
var imgData = new Image();
imgData.src = img.src;
if (imgData.width > width && imgData.height > height) {
return imgData.src;
}
}
}

具体这样做的应用有:微信,今日头条

第三种做法:对页面进行截图,使用截图进行分享

有些应用在分享时会对H5页面进行截图,然后把截图作为分享的内容。

具体这样做的应用有:微博,UC浏览器

总结

以上就是三种获取H5页面内分享缩略图的三种策略,我们最终选择的是第一种和第二种相结合的方式,如果页面内指定了分享图片,则使用,否则获取页面内第一张符合条件的图片进行分享。