Html2canvas – 微信中长按存图 – 将h5活动结果保存到本地

现在微信里有很多流行的h5活动页面。这些小h5大部分都是简单的交互，然后得出一个abcd早就草拟好的结果。根据您的选择，有几种情况，最后其中一种将是您测试的答案。比如这是最终的结果图：

我自己做的时候，在网上找不到完整的系统说明。在这里整理一下。

###实现微信h5将网页保存为图片

虽然活动基本上都有预先确定的答案，但每个用户产生的结果还是不同的。特别是有一些需求，比如用户的昵称。

因此需要将网页动态生成为图片，然后用户可以长按该图片调用微信的长按保存图片功能。

这里只记录生成和保存最后一张截图的做法：

一般的做法是，用户选择并生成结果后，一定要提前触发点击等事件，这样才能快速绘制：

具体使用和配置，以及bug填充，请看这篇文章：【JS-基于网页截图（+下载截图）功能的实现】（）

这里我直接调用是基于封装的方法：

1.生成截图

“`js

html2img({
  targetEleId: oCanvas,
  imgType: 'png',
  titleStr: '描述语'
},false)

“`

然后获取截图的代码，作为图片的src，将新建的img元素放入body中将网络图片保存到本地，

“`js

.then((imgUrl)=>{
  let oImg = document.createElement('img');
  oImg.id = 'oImg';
  oImg.className = 'o-img';
  oImg.src= imgUrl;//imgUrl是html2canvas返回的截图的base64码
  document.body.appendChild(oImg);//将生成的截图放到页面中

});

“`

2.长按截图（核心）——微信中调出图片到手机的功能。

正常需求下，

既然微信是根据谁保存谁，根据哪张图片保存哪张图片，那么将需要保存的图片覆盖到顶部，让它成为用户唯一可以点击的图片将网络图片保存到本地，不是’可以吗？

所以把要保存的图片等级调到最高，覆盖在所有元素之上，这样用户就可以长按图片弹出保存功能了！

但有时也有一定的要求——其实市面上很多h5也达到了这个效果：）

需要保存到手机的最后一张图片和用户当前正在观看的最后一张图片 一个结果图不是一个！ ！ ！

一开始我想哭。

如何长按这张图片保存另一张图片，微信长按保存图片没有更改图片url的界面。

后来我想，把上面的图片不可见不是更好吗？结果上覆盖了一张不可见的图片。虽然用户看到的是结果图，但保存下来的却是另外一张当时不可见的截图。

王子的狸猫！

问题又来了：微信长按不可见的图片，但存在于DOM结构中，还能激活保存图片功能吗？

经过紧张的测试，我得出结论，长按看不见的图片也可以激活微信的长按保存图片功能。哈哈！

所以最后的处理是：将最后一张要保存的图片覆盖在上面，使其不可见，只需设置透明度即可。

“`css

.o-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  z-index: 20;
}

“`

2018-08-1416:32:00