现在有很多在微信里流行的h5活动页。这些小h5大部分都是简单的交互然后得出一个abcd早就拟定好的结果，根据你的选项分几种情况，最终得到其中一个作为你测试的答案。比如这个就是最后那张结果图：
当时自己做的时候，网上搜不到一个系统完整的做法讲解。这里整理一下。
### 实现微信h5保存网页为图片
虽然基本上活动都是有事先固定好的答案，但是每个用户生成的结果还是不一样的。尤其有的需求还有用户的昵称之类。
所以，就要动态生成web网页为图片了，然后用户长按这张图片，调取微信的长按存图功能就行了。
这里只记录
最后生成截图并保存的做法：
一般做法是，用户选择完毕生成结果后，要有一个事件比如click提前触发，让html2canvas赶紧画图：
具体html2canvas的使用和配置，以及bug填坑之类请看这一篇：[
JS - 基于html2canvas实现 网页截图(+下载截图) 功能](https://www.cnblogs.com/padding1015/p/8947062.html)
这里我直接调用基于html2canvas封装好的html2img方法：
1. html2canvas生成截图
```js
html2img({
targetEleId: oCanvas,
imgType: 'png',
titleStr: '描述语'
},false)
```
然后获取截图的base64码，作为图片的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结构中的图，也调起存图功能呢？
经过提心吊胆地测试后得出结论：
长按不可视的图片也可以调起微信的长按存图功能。哈哈！
所以最后的处理是：最后要保存的图盖在最上边， 要让其看不见，就设置透明度
opacity即可。
```css
.o-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
z-index: 20;
}
```
2018-08-14 16:32:00
来源：oschina
链接：https://my.oschina.net/u/4321684/blog/3229285