vue中实现h5分享截图

最新推荐文章于 2024-08-23 10:41:37 发布

hh22。

最新推荐文章于 2024-08-23 10:41:37 发布

阅读量557

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_44953689/article/details/118088789

版权

笔记专栏收录该内容

37 篇文章 2 订阅

订阅专栏

本文介绍了如何在Vue应用中使用HTML2canvas和domtoimage进行截图功能的实现，通过实例展示了如何在index.vue中调用并忽略部分元素。同时对比了两者在支持滚动条和图片跨域方面的差异。

摘要由CSDN通过智能技术生成

1、html2canvas

1、html2canvas官方文档

使用案例：

1、index.vue

<template>
  <div>
    <div id="capture">
      <div>截图内容<div/>
      
      <!-- data-html2canvas-ignore  截图时忽略 -->
      <button @click="printscreen" data-html2canvas-ignore>点击截图</button>
    </div>

    <poster1 v-model="showPoster"></poster1>
  </div>
</template>

<script>
import poster1 from '@/components/canvas/poster1'
export default {
  components: {
    poster1
  },
  data() {
    return {
      showPoster: false
    }
  },
  created() {},
  mounted() {},
  methods: {
    printscreen() {
      this.showPoster = true
    }
  }
}
</script>

<style scoped lang="scss">
</style>

2、poster1.vue 组件

<template>
  <div>
    <!-- 遮罩层 -->
    <div :class="{hidePoster:showPoster}"></div>
    <!-- <div v-if="showPoster" class="fx_box"> -->
    <div v-if="showPoster" class="fx_content">
      <img :src="imgURL" alt />
      <img class="close" @click="close" src="../../assets/close.png" alt />
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
// 不支持有滚动条的情况，样式会出问题
import html2canvas from 'html2canvas'
export default {
  props: {
    value: Boolean
  },
  watch: {
    value: function(val) {
      if (val) {
        this.showPoster = val
        this.init()
      }
    }
  },
  data() {
    return {
      showPoster: false,
      imgURL: ''
    }
  },
  created() {},
  mounted() {},
  methods: {
    init() {
      html2canvas(document.querySelector('#capture'), {
        backgroundColor: 'white', //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1 //设置放大的倍数
      }).then(canvas => {
        // console.log(canvas.toDataURL('image/png'))
        this.imgURL = canvas.toDataURL('image/png') // base64数据
        // document.body.appendChild(canvas)
      })
    },
    close() {
      this.showPoster = false
      this.$emit('input', false)
    }
  }
}
</script>

<style scoped lang="scss">
.hidePoster {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.2);
}
// .fx_box {
// position: relative;
// width: 100%;
// // height: 600px;
// z-index: 999;
.fx_content {
  position: absolute;
  z-index: 999;
  width: 85%;
  // height: 600px;
  top: 10%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 15px;
  padding: 10px 10px 30px 10px;
  box-sizing: border-box;
  background-color: #fff;
  img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
  }
  .close {
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translate(-50%);
    z-index: 999;
  }
}
// }
</style>

2、domtoimage（可支持有滚动条的情况）

参考文档

使用案例：

1.index.vue

<template>
  <div>
    <div id="capture">
      <div>截图内容<div/>
    </div>
    <button @click="printscreen" data-html2canvas-ignore>点击截图</button>

    <poster2 v-model="showPoster"></poster2>
  </div>
</template>

<script>
import poster2 from '@/components/canvas/poster2'
export default {
  components: {
    poster2
  },
  data() {
    return {
      showPoster: false
    }
  },
  created() {},
  mounted() {},
  methods: {
    printscreen() {
      this.showPoster = true
    }
  }
}
</script>

<style scoped lang="scss">
</style>

2、poster2组件

<template>
  <div>
    <!-- 遮罩层 -->
    <div :class="{hidePoster:showPoster}"></div>
    <!-- <div v-if="showPoster" class="fx_box"> -->
    <div v-if="showPoster" class="fx_content">
      <img :src="imgURL" alt />
      <img class="close" @click="close" src="../../assets/close.png" alt />
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
// 可支持有滚动条的情况
import domtoimage from 'dom-to-image'
export default {
  props: {
    value: Boolean
  },
  data() {
    return {
      showPoster: false,
      imgURL: ''
    }
  },
  watch: {
    value: function(val) {
      if (val) {
        this.showPoster = val
        this.init()
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    init() {
      let node = document.getElementById('capture')
      domtoimage
        .toPng(node)
        .then(dataUrl => {
          this.imgURL = dataUrl
        })
        .catch(function(error) {
          console.error('oops, something went wrong!', error)
        })
    },
    close() {
      this.showPoster = false
      this.$emit('input', false)
    }
  }
}
</script>

<style scoped lang="scss">
.hidePoster {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.2);
}
// .fx_box {
// position: relative;
// width: 100%;
// // height: 600px;
// z-index: 999;
.fx_content {
  position: absolute;
  z-index: 999;
  width: 85%;
  // height: 600px;
  top: 10%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 15px;
  padding: 10px 10px 30px 10px;
  box-sizing: border-box;
  background-color: #fff;
  img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
  }
  .close {
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translate(-50%);
    z-index: 999;
  }
}
// }
</style>