使用vue实现HTML页面生成图片的方法
随着网络的发展，越来越多的网络平台应运而生。如何获得更多的流量，吸引更多的眼球已经成为网络平台生存、发展的必要条件。现在网络平台最常见的一种宣传方式就是人邀人。
我最近就接到一个需求，做一个 海报页面，并且能保存到手机 ，方便用户分享给朋友，希望能够达到人邀人的效果。
给人第一感觉这个需求就是保存图片的功能，当时梳理是却发现不是那么简单：
1.动态生成一张带logo的二维码
2.整个海报的html部分转化成图片
3.保存图片至手机相册
生成带logo的二维码
用 vue_qrcodes 生成带logo的二维码
安装
npm install vue_qrcodes -- save
使用
<!--部分html代码-->
<qrcode :url="qrcodeUrl"
:iconurl="iconurl"
:wid="298"
:hei="278"
:imgwid="100"
:imghei="100">
</qrcode>
// 部分js代码
import qrcode from 'vue_qrcodes'
//...省略其他代码
components: {
qrcode
}
问题来了：二维码出现了，但是二维码和logo大小并不是你想要，无法自适应。那就需要我们重置二维码和logo的样式。
.logoimg {
height: 100px !important;
width: 100px !important;
margin-top: -50px !important;
margin-left: -50px !important;
}
#qrcode {
margin-top: 20px;
img {
height: 278px !important;
width: 298px !important;
}
}
html转化为base64图片
html转化为canvas中我选用组件 html2canvas
yarn add html2canvas
import html2canvas from 'html2canvas'
为了防止页面有闪屏我用了两个div，一个存放原来的dom，一个存放canvas的生成的图片，再v-if控制展示的元素。
js调用函数：
htmlToCanvas() {
html2canvas(this.$refs.bill, {})
.then((canvas) => {
let imageUrl = canvas.toDataURL('image/png'); // 将canvas转成base64图片格式
this.canvasImageUrl = imageUrl;
this.isDom = false;
});
}
// 二维码地址
this.qrcodeUrl = data.data.inviteCodeAddress
// 调用html转化canvas函数
this.htmlToCanvas();
结果如图：
页面转化成了图片，但是二维码没有展示出来，控制台报错：
除二维码其他部分已经转化为图片，二维码不显示，原因有两种可能：
转化时二维码还没有加载完成
转化二维码的过程中报错了
首先尝试了nextTick
使用 nextTick 将回调延迟到下次DOM更新循环之后执行
// 二维码地址
this.qrcodeUrl = data.data.inviteCodeAddress
this.$nextTick(() => {
// 跳用html转化canvas函数
this.htmlToCanvas();
})
发现二维码出来了，但是二维码的大小不对，并且控制台还是存在报错。虽然问题没有完全解决，但是二维码出现了。可以证明二维码不展示的原因是，转化时二维码没有加载完成。
再尝试使用setTimeout
使用 setTimeout 将回调延迟到指定时间之后执行
// 二维码地址
this.qrcodeUrl = data.data.inviteCodeAddress
setTimeout(()=>{
// 调用html转化canvas函数
this.htmlToCanvas();
}, 200)
查看效果：
注：setTimeout是我目前能想到延迟加载方法。各位大佬们，如果这个有更好的方法解决上面的问题，麻烦给留言，在此谢过。
页面正常，控制台没有报错，可是logo没有展示出来。
logo地址是：
iconurl: 'https://static.daojia.com/assets/project/tosimple-pic/LOGO_1576564983633.png',
项目在本地启动，可能存在跨域问题。
htmlToCanvas() {
html2canvas(this.$refs.bill, {
useCORS: true // 解决图片跨域问题
}).then((canvas) => {
// 将canvas转成base64图片格式
let imageUrl = canvas.toDataURL('image/png');
this.canvasImageUrl = imageUrl;
this.isDom = false;
}).catch((e) => console.log(e));
}
至此html成功转化为图片。
图片保存至手机
首先尝试了JS-SDK中的下载图片downloadImage
经过各种尝试并不能实现。
最后采用的是微信长按保存图片
海报部分已经转化为图片，无需再开发，只要提示用户长按图片可以保存即可。
总结
到此这篇关于使用vue实现HTML页面生成图片的文章就介绍到这了,更多相关vue html页面生成图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue遮罩层如何阻止滚动，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了Vue如何优雅地移除数组中的特定元素,文中介绍了单个去除和批量去除的操作方法,并通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-03-03
用vue-cli脚手架可以快速的构建出一个前端vue框架的项目结构,下面这篇文章主要给大家介绍了关于脚手架(vue-cli)创建Vue项目的超详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
本文以校验两次密码的一致性应用，给出两个可变属性值的字段之间的联合校验的典型解决方案，通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现，需要的朋友一起看看吧2021-07-07
这篇文章主要为大家详细介绍了Vue中fragment.js的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue 在服务器端直接修改请求的接口地址的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue+webpack 更换主题N种方案优劣分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了在Vue nuxt项目中，如何使用Echart(百度图表)柱状图来实现疫情数据统计，感兴趣的小伙伴可以跟随小编一起学习一下2021-12-12
这篇文章给大家介绍了vue项目全局配置微信分享思路讲解，使用vue作为框架，使用vux作为ui组件库，具体内容详情大家跟随脚本之家小编一起学习吧2018-05-05
在Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住,怎么来解决这个问题呢？下面小编给大家带来了Vue开发中对话框被遮罩层挡住的问题及解决方法，一起看看吧2018-11-11
最新评论