opacity骚操作

[reng99]

开篇如图，母亲节快乐@～@！

借着这个节日，结合下最近的需求：移动端h5生成图片没有二维码（如上），长按保存下来时候有二维码（如下）。我们来聊聊如何实现，文末配上不严谨的源码，感兴趣的看官自取啊～

到这里，某些大佬应该明白怎么简单操作，完成这个尴尬的需求了，不过之前自己还是费了点功夫，脑袋转不过弯啊。

是的，结合opacity进行骚操作：

1. 没有二维码的图片（原材料）展示出来给用户
2. 生成的带二维码的图片覆盖在没有二维码图片上面
3. 带有二维码的图片opacity置为0

嗯，既然要生成图片，且为了缓解后端的压力，我们前端来生成图片～

生成图片

这里使用了html2canvas进行图片的生成操作。至于为什么选择html2canvas进行图片的生成呢？可以参考下富途的文章--移动端页面分享快照生成总结。

使用html2canvas需要注意的地方有：

• 使用图片img来代替背景图，截取的清晰度更好
• 浏览器兼容
• CSS样式不支持的情况
• 图片如果存在跨域问题，这个必须设置好代理允许其跨域
• etc

opacity操作

接下来就是实现这个长按图片识别二维码的操作了，如上gif图。我长按了图片，给人的错觉就是按了那张没有带二维码的图片，实际上是按了带二维码的图片。因为两张图片的展示位置是一样的，带二维码的图片覆盖在最上面，并且其opacity设置为0了，所以长按的时候会出现识别图中二维码的字样。

就是这样啦，opacity结合absolute就可以轻松实现了😉

对了，gif图的二维码图片是使用qrcode生成的。

以上，如果还是不怎么了解，可以clone我的代码（见下）下来跑下就明白了～

备注

图片来源网络，侵删

源码：https://github.com/reng99/blogs/tree/master/src/opacity_demo