vue 页面生成图片保存
阅读原文时间:2023年07月11日阅读:1

需求:将页面中的元素转成图片,支持保存或下载。要求下载的图片包含页面背景,头像,用户名,文本为“我的邀请码”和个人二维码。

实现:将页面绘制到canvas中,生成base64图片链接,支持移动端的长按保存图片。

技术与插件:vue,qrcodejs2,html2canvas,nutUI

示例:以下将代码分成了三部分,合成便是一个完整的vue单页。

HTML代码:

SCRIPT:

CSS代码:

结果成图:

点击保存图片:

下载后的图片:

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器