使用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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
vue中axios封装使用的完整教程
Mar 03 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概述.
2006/10/09 PHP
拼音码表的生成
2006/10/09 PHP
PHP新手上路(四)
2006/10/09 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
vue权限路由实现的方法示例总结
2018/07/29 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
python实现决策树
2017/12/21 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Python面向对象实现方法总结
2020/08/12 Python
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
旷课检讨书2000字
2014/01/14 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
干部作风建设工作总结
2014/10/29 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript