vue 把页面生成图片 html2canvas

第一步：

npm install html2canvas --save
或者
cnpm install html2canvas --save

第二步： 需要把你想生成图片的div或者某块元素获取他的ref

<div  ref="div1">
     这个div内的东西都会生成图片
</div>
<img v-show="img" :src="img"/>
<button @click="scImg()">生成图片</button>

第三步：写在方法里

<script>
  import html2canvas from "html2canvas";
  data() {
    return {  
        img: ''
    }
  },
mounted() {
  // 如果你想刚页面就生成图片  在mounted生命周期当中调用方法； created生命周期 还没有获取到dom元素
},
  methods: {
      scImg() {
        html2canvas(this.$refs.div1).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png"); 
        //  这里是转换成base64格式的
        this.img = dataURL 
        })
      },
  }
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容