开篇如图，母亲节快乐@～@！
借着这个节日，结合下最近的需求：移动端h5生成图片没有二维码（如上），长按保存下来时候有二维码（如下）。我们来聊聊如何实现，文末配上不严谨的源码，感兴趣的看官自取啊～
到这里，某些大佬应该明白怎么简单操作，完成这个尴尬的需求了，不过之前自己还是费了点功夫，脑袋转不过弯啊。
是的，结合opacity进行骚操作：
- 没有二维码的图片（原材料）展示出来给用户
- 生成的带二维码的图片覆盖在没有二维码图片上面
- 带有二维码的图片opacity置为0
嗯，既然要生成图片，且为了缓解后端的压力，我们前端来生成图片～
生成图片
这里使用了进行图片的生成操作。至于为什么选择html2canvas进行图片的生成呢？可以参考下富途的文章--。
使用html2canvas需要注意的地方有：
- 使用图片img来代替背景图，截取的清晰度更好
- 浏览器兼容
- CSS样式不支持的情况
- 图片如果存在跨域问题，这个必须设置好代理允许其跨域
- etc
opacity操作
接下来就是实现这个长按图片识别二维码的操作了，如上gif图。我长按了图片，给人的错觉就是按了那张没有带二维码的图片，实际上是按了带二维码的图片。因为两张图片的展示位置是一样的，带二维码的图片覆盖在最上面，并且其opacity设置为0了，所以长按的时候会出现识别图中二维码的字样。
就是这样啦，opacity结合absolute就可以轻松实现了?
对了，gif图的二维码图片是使用qrcode生成的。
以上，如果还是不怎么了解，可以clone我的代码（见下）下来跑下就明白了～
备注
图片来源网络，侵删
源码：
文章首发：
更多内容：