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 {
    width: 100%;
    height: 100%;37     display: block;
  }
  span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
  }
}
</style>