使用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


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


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


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



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


最后


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


相关文章
|
3月前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
81 50
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
72 7
|
2月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
73 11
|
2月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
68 0
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
60 2
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
43 0
|
2月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
118 0
|
3月前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `<html>`, `<head>`, `<body>` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
91 0
|
6天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
51 1
|
17天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章