開篇如圖，母親節快樂@～@！
藉著這個節日，結合下最近的需求：移動端h5生成圖片沒有二維碼（如上），長按儲存下來時候有二維碼（如下）。我們來聊聊如何實現，文末配上不嚴謹的原始碼，感興趣的看官自取啊～
到這裡，某些大佬應該明白怎麼簡單操作，完成這個尷尬的需求了，不過之前自己還是費了點功夫，腦袋轉不過彎啊。
是的，結合opacity進行騷操作：
- 沒有二維碼的圖片（原材料）展示出來給使用者
- 生成的帶二維碼的圖片覆蓋在沒有二維碼圖片上面
- 帶有二維碼的圖片opacity置為0
嗯，既然要生成圖片，且為了緩解後端的壓力，我們前端來生成圖片～
生成圖片
這裡使用了html2canvas進行圖片的生成操作。至於為什麼選擇html2canvas進行圖片的生成呢？可以參考下富途的文章--移動端頁面分享快照生成總結。
使用html2canvas需要注意的地方有：
- 使用圖片img來代替背景圖，擷取的清晰度更好
- 瀏覽器相容
- CSS樣式不支援的情況
- 圖片如果存在跨域問題，這個必須設定好代理允許其跨域
- etc
opacity操作
接下來就是實現這個長按圖片識別二維碼的操作了，如上gif圖。我長按了圖片，給人的錯覺就是按了那張沒有帶二維碼的圖片，實際上是按了帶二維碼的圖片。因為兩張圖片的展示位置是一樣的，帶二維碼的圖片覆蓋在最上面，並且其opacity設定為0了，所以長按的時候會出現識別圖中二維碼的字樣。
就是這樣啦，opacity結合absolute就可以輕鬆實現了?
對了，gif圖的二維碼圖片是使用qrcode生成的。
以上，如果還是不怎麼了解，可以clone我的程式碼（見下）下來跑下就明白了～
備註
圖片來源網路，侵刪