現在有很多在微信里流行的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