vue将页面(dom元素)转换成图片

npm install html2canvas -d

利用插件将dom元素转成图片，此时将content下载成图片，里面包含了一张照片和定位在中间的span标签，

只要在content元素内部，无论怎么写样式，都在该元素内，都会通过插件转成图片

<template>
  <div class="home">
    <div class="content" ref="content">
      <img :src="imgUrl" alt="">
      <span>hahahah</span>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'

export default {
  data() {
    return {
      imgUrl: require("../assets/20190111225623.png")
    }
  },
  mounted() {
    this.$nextTick(() => {
      html2canvas(this.$refs.content).then(resolve => {
        let imgUrl = resolve.toDataURL('image/png');           //此时就得到了dom元素转成了base64的图片
        console.log(imgUrl)
      })
    })
  }
}
</script>

<style lang="less">
.content {
  position: relative;
  img {
     100%;
    height: 100%;37     display: block;
  }
  span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
  }
}
</style>