使用vue实现HTML页面生成图片的方法


Posted in Javascript onMarch 12, 2020

随着网络的发展,越来越多的网络平台应运而生。如何获得更多的流量,吸引更多的眼球已经成为网络平台生存、发展的必要条件。现在网络平台最常见的一种宣传方式就是人邀人。

我最近就接到一个需求,做一个 海报页面,并且能保存到手机 ,方便用户分享给朋友,希望能够达到人邀人的效果。

使用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控制展示的元素。

使用vue实现HTML页面生成图片的方法 

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();

结果如图:

使用vue实现HTML页面生成图片的方法 

页面转化成了图片,但是二维码没有展示出来,控制台报错:

使用vue实现HTML页面生成图片的方法 

除二维码其他部分已经转化为图片,二维码不显示,原因有两种可能:

转化时二维码还没有加载完成

转化二维码的过程中报错了

首先尝试了nextTick

使用 nextTick 将回调延迟到下次DOM更新循环之后执行

// 二维码地址
this.qrcodeUrl = data.data.inviteCodeAddress 
this.$nextTick(() => {
 // 跳用html转化canvas函数
 this.htmlToCanvas(); 
 })

使用vue实现HTML页面生成图片的方法 

发现二维码出来了,但是二维码的大小不对,并且控制台还是存在报错。虽然问题没有完全解决,但是二维码出现了。可以证明二维码不展示的原因是,转化时二维码没有加载完成。

再尝试使用setTimeout

使用 setTimeout 将回调延迟到指定时间之后执行

// 二维码地址
this.qrcodeUrl = data.data.inviteCodeAddress 
setTimeout(()=>{
 // 调用html转化canvas函数
 this.htmlToCanvas(); 
}, 200)

查看效果:

使用vue实现HTML页面生成图片的方法 

注: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 html页面生成图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
JavaScript实现随机点名器
Mar 25 #Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 #Javascript
JavaScript实现多个物体同时运动
Mar 12 #Javascript
基于javascript实现碰撞检测
Mar 12 #Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 #Javascript
javascript实现拖拽碰撞检测
Mar 12 #Javascript
You might like
学习php分页代码实例
2013/10/24 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
python3对接mysql数据库实例详解
2019/04/30 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python用SSH连接到网络设备
2021/02/18 Python
高中自我评价分享
2013/12/05 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
暑期培训班招生方案
2014/08/26 职场文书
红色旅游心得体会
2014/09/03 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
爱心助学感谢信
2015/01/21 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
vue中div禁止点击事件的实现
2022/04/02 Vue.js
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS