使用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天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
22 8
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
93 7
|
2月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
81 11
|
2月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
98 0
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
48 0
|
22天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
119 1
|
2天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
18 1
|
1月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章