使用vue实现HTML页面生成图片(下)

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

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



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


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


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


首先尝试了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


经过各种尝试并不能实现。


最后采用的是微信长按保存图片


海报部分已经转化为图片,无需再开发,只要提示用户长按图片可以保存即可。



注 :各位大佬们如果更好的方法保存图片至手机相册,欢迎留言


最后


本文介绍海报保存至手机相册的实现流程,部分环节上还存在优化空间,欢迎大家批评与指正,共同进步。


相关文章
|
10天前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
|
18天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
40 2
|
24天前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
10 2
|
22天前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
56 0
|
30天前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `<html>`, `<head>`, `<body>` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
59 0
|
1月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
83 0
|
1月前
|
JavaScript 前端开发 安全
如何在 Vue 页面中禁止选择、右键、复制及 F12 开发者工具
【10月更文挑战第3天】 在前端开发中,保护页面内容不被随意复制或查看是一个常见需求。本文介绍了如何在 Vue 应用中实现禁止文本选择、右键菜单、复制操作以及 F12 开发者工具的方法。通过结合 CSS 和 JavaScript 事件监听,我们可以增加用户查看和复制内容的难度,尽管无法完全阻止高级用户。适当的防护措施可以为内容提供一层额外的保护,帮助开发者提升页面安全性。
336 0
|
1月前
|
XML Web App开发 数据格式
HTML 页面显示 XML 数据
10月更文挑战第2天
|
存储 JavaScript 前端开发
Vue 和 HTML FormData配合axios或ajax上传文件,提交表单数据
Vue 和 HTML FormData配合axios或ajax上传文件,提交表单数据
659 0