主要实现:前端直接通过canvas生成海报
摇晃手机抽取新年签跳到第一个页面,需要绘制头像、关键字以及保存按钮,黄色的保存按钮其实就是呃一张透明的png图片,把它画上去。那在这个button上面儿需要固定一个宽高和它差不多大小的一个空的、透明的div,在这个div上加点击事件,这个事件就是调第二张要保存的那个canvas。第二张这个是没有保存按钮的但有二维码。带二维码的这张canvas放哪里呢?一种方案是定位,给一个特别大的top或left,让它不显示在屏幕里边;另一个方案是层级,预览的这张canvas在真正要保存canvas图片之上,但是会有问题。手机浏览器版本低的话,定了层级不管用,一些安卓手机也会有问题,有时候会浮上来没被盖住。
当然,如果要实现保存高清图的话,还是需要处理的,那就是放大,不过这个是笨方法。最优的方法是拆解这张图像,确保导出的canvas是最高清的,而且对用户来说也是最省流量的。