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

npm install html2canvas -d

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

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

 1 <template>
 2   <div class="home">
 3     <div class="content" ref="content">
 4       <img :src="imgUrl" alt="">
 5       <span>hahahah</span>
 6     </div>
 7   </div>
 8 </template>
 9 
10 <script>
11 import html2canvas from 'html2canvas'
12 
13 export default {
14   data() {
15     return {
16       imgUrl: require("../assets/20190111225623.png")
17     }
18   },
19   mounted() {
20     this.$nextTick(() => {
21       html2canvas(this.$refs.content).then(resolve => {
22         let imgUrl = resolve.toDataURL('image/png');           //此时就得到了dom元素转成了base64的图片
23         console.log(imgUrl)
24       })
25     })
26   }
27 }
28 </script>
29 
30 <style lang="less">
31 .content {
32   position: relative;
33   img {
34     width: 100%;
35     height: 100%;37     display: block;
38   }
39   span {
40     position: absolute;
41     top: 0;
42     left: 50%;
43     transform: translate(-50%);
44   }
45 }
46 </style>

标签：content,vue,dom,元素,html2canvas,图片,imgUrl,页面
来源： https://www.cnblogs.com/shun1015/p/14157654.html