vue 使用原生canvas_Vue中使用canvas方法总结

下面就是小编带给大家的Vue中怎么使用canvas方法操作,希望能够给你们带来一定的帮助,谢谢大家的观看。

99132296f06224d3b20e1867e2e7e72f.png

1、如果数组中都是canvas对象, vue如何能吧canvas对象渲染到页面。v-html只能渲染出一个字符串, 没办法像appendChild那样插入canvas对象。

56df65ecd7f56d0bcb6921c70469300e.png

2、项目架构是vue-cli的单页应用,如果在index.html入口主文件里面引入;

69865c56e0c48bf8462dc58505a66c90.png

54ae3b83fbbabe941853ba18b162e148.png

3、这样每个组件都会加载此js,造成资源浪费。所以通过import方式,在需要的组件里面引入,但是,html2canvas 不支持import这种导入形式。下面通过修改html2canvas的源码,让其支持import这种引入。

ab11838eeb786342790aecf7e5f188a5.png

4、在html2canvas源码中,找到 下面标红的这一行。    在页面最低端加上 export default html2canvasExport;在需要引入html2canvas的组件中 import html2canvas from '**/html2canvas'。

6104d7ebdb81990f1a0ebb0f9f458ed5.png

5、Vue.js在数据绑定的API设计上借鉴了Angular的指令机制:用户可以通过具有特殊前缀的HTML 属性来实现数据绑定,也可以使用常见的花括号模板插值,或是在表单元素上使用双向绑定。

f27ad7ae469e4049baf39ca200ace501.png

6、{{msg}}

6135dfa01e6acc76ae4fa35bd3fe2665.png

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源:php中文网

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值