需求:将页面中的元素转成图片,支持保存或下载。要求下载的图片包含页面背景,头像,用户名,文本为“我的邀请码”和个人二维码。
实现:将页面绘制到canvas中,生成base64图片链接,支持移动端的长按保存图片。
技术与插件:vue,qrcodejs2,html2canvas,nutUI
示例:以下将代码分成了三部分,合成便是一个完整的vue单页。
HTML代码:
旋风小土豆
我的邀请码
SCRIPT:
CSS代码:
结果成图:
点击保存图片:
下载后的图片:
手机扫一扫
移动阅读更方便
你可能感兴趣的文章