vue使用html2canvas进行页面截图 vue使用html2canvas进行页面截图

vue使用html2canvas进行页面截图

Install
npm install html2canvas

Use
import html2canvas from 'html2canvas';

html
<!-- 截图区域 -->
<div id="faultTree" ref="faultTree"  :style="{width: '100%', height: height + 'px'}"></div>
<!-- 显示图片区域 -->
<img style="width: 100%;height: 300px;" class="real_pic" :src="dataURL" />

js
// methods
let self = this
let ref = this.$refs.faultTree // 截图区域
 this.$html2canvas(ref, {
      backgroundColor: '#142E48'
 }).then((canvas) => {
      let dataURL = canvas.toDataURL("image/png")
      self.dataURL = dataURL

分享本文至:

评论 0

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论