zoukankan      html  css  js  c++  java
  • 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      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>
  • 相关阅读:
    快速幂
    hdu 1595 find the longest of the shortest(迪杰斯特拉,减去一条边,求最大最短路)
    hdu 4121 Xiangqi
    hdu 2224 The shortest path
    hdu4923
    矩阵模板
    hdu4570(区间dp)
    hdu1978(记忆化搜索)
    hdu4283(区间dp)
    hdu1160最长递减子序列及其路径
  • 原文地址:https://www.cnblogs.com/shun1015/p/14157654.html
Copyright © 2011-2022 走看看