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


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


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


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



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


最后


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


相关文章
|
5天前
|
Web App开发 API
通过html页面方式访问www.iximo.com的方式(原创)
通过html页面方式访问www.iximo.com的方式(原创)
16 2
|
4天前
|
前端开发 JavaScript 安全
如何给页面元素添加水印背景,在vue中怎么处理?
如何给页面元素添加水印背景,在vue中怎么处理?
|
4天前
|
JavaScript 数据可视化 UED
用Vue搭建一个大屏数据可视化页面实战二(Vue实战系列)
用Vue搭建一个大屏数据可视化页面实战二(Vue实战系列)
|
4天前
|
JavaScript 前端开发 数据可视化
用Vue搭建一个大屏数据可视化页面实战一(Vue实战系列)
用Vue搭建一个大屏数据可视化页面实战一(Vue实战系列)
|
5天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
11 0
|
5天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
12 0
|
5天前
|
监控 JavaScript 前端开发
vue切换页面白屏问题怎么解决
vue切换页面白屏问题怎么解决
20 0
|
5天前
|
JavaScript 前端开发 API
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
16 2
|
5天前
|
JavaScript 前端开发 安全
Vue中如何以HTML形式显示内容并动态生成HTML代码
Vue中如何以HTML形式显示内容并动态生成HTML代码
28 1
|
5天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。