如何在vue中使用html2canvas?(dom截图)
manongba · 2134浏览 · 发布于2019-10-17
0、先下载是王道
npm install html2canvas
1、在 HTML 中标记指定要截图的元素
<!--选区(要截图的区域)设置 ref 属性--> <div ref="domToImg"> <img src="a.png" alt=""> <span>某标语</span> <img src="b.png" alt="某二维码"> </div>
2、在 js 中,导入并使用 html2canvas
import html2canvas from 'html2canvas' data () { return { htmlUrl: '' //接收生成图片的 url ,可以在html中使用img标签显示该图片 } }, methods: { //截图方法 toImg () { // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等 html2canvas(this.$refs.domToImg, { backgroundColor: null, useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题 }).then((canvas) => { let url = canvas.toDataURL('image/png') // 最终生成图片的 url this.htmlUrl = url }) } }
相关推荐
图形学基础 | 实现OBJ文件的载入
iamitnan · 1683浏览 · 2019-05-29 10:10:17
图形用户界面和游戏开发
qq2360248666 · 703浏览 · 2019-06-11 09:57:01
Three.js模型隐藏或显示
吴振华 · 553浏览 · 2019-06-14 10:18:27
Cocos工程命名规则整理(node部分)
吴振华 · 863浏览 · 2019-06-14 10:24:18
分类专栏
最新发布
最热排行
0评论