最近遇见了h5分享页面,就是自己写的整页内容(内含二维码)可以长按保存到手机里,然后发给别人。
其实就是h5生成分享海报,以前的时候写过这个东西,但是太久了都忘了,然后上网去搜索,答案也是五花八门,也很不简洁,自己理解起来也很费劲,好不容易把代码搬到自己这边,运行不起来是一方面,另一方面是改成自己的比较费劲…所以我写了一个很简洁的小案例,也算是给自己留一份笔记。在第三模块会将完整代码整份贴出。
移动端(手机端)演示:
电脑模拟手机:
页面是普通的html代码,该怎么写就怎么写,让他变成图片这块是借助 html2canvas
这个第三方 js 库实现的。
那这个html2canvas
东西是啥呢?下面进入网址自行查看:
他的中文网址:https://allenchinese.github.io/html2canvas-docs-zh-cn/
英文网址