每天学习一个vue插件(13)——html2canvas

如果你获得了银牌，你总会被遗忘
如果赢了金牌，你会成为典范

前言

1 介绍

配置项

options

{
  // 横向初始位置
  // 解决图片位置偏移问题
  scrollY: 0,
  // 纵向初始位置
  scrollX: 0,
  // 开启跨域配置
  // 解决图片跨域问题
  useCORS: true,
  // canvas高
  // 解决图片显示不全问题
  height: BaseScreenshot.scrollHeight,
  // canvas宽
  width: BaseScreenshot.scrollWidth
}

常用方法

html2canvas

// 生成截图
html2canvas(el, options)

2 使用

安装

npm install html2canvas  --save

截图分享

<template>
  <div class="BaseScreenshot" ref="baseScreenshot">
    <p><span>希望</span>是个好东西，也许是世间最好的东西</p>
    <p>
      希望是个好东西，也许是世间最好的东西
    </p>

    <img width="100%" :src="src" />
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
  data() {
    return {
      src: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      const BaseScreenshot = this.$refs.baseScreenshot
      // 保存滚动位置
      const [x, y] = [window.scrollX, window.scrollY]

      // 滚动的初始位置
      window.scrollTo(0, 0)

      // 生成截图
      html2canvas(BaseScreenshot, {
        scrollY: 0,
        scrollX: 0,
        // 开启跨域配置
        useCORS: true,
        // canvas高
        height: BaseScreenshot.scrollHeight,
        // canvas宽
        width: BaseScreenshot.scrollWidth
      }).then(canvas => {
        // document.body.appendChild(canvas)
        this.src = canvas.toDataURL('image/jpeg', 1.0)

        // 恢复滚动位置
        window.scrollTo(x, y)
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.BaseScreenshot {
  position: relative;
  width: 110vw;
  height: 110vh;
  background-image: linear-gradient(45deg, chocolate, lightpink, red);
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  p {
    white-space: nowrap;
    margin-top: 20px;
    span {
      font-size: 24px;
    }
  }
  img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
  }
}
</style>

3.注意

1.有滚动条时，截图不全，须先滚动到原始位置(0, 0)
2.图片模糊时，先放大，再设置dpi缩小
3.图片跨域时，在img标签上添加crossorigin属性

尾声

如果生活艰难的话，要不要躲进我甜甜的梦里~

晚安 ^_^

参考链接

• html2canvas 文档
• 解决html2canvas截图不全问题
• 解决html2canvas截图模糊问题
• 解决html2canvas截图跨域问题

往期回顾

• 每天学习一个vue插件(1)——better-scroll
• 每天学习一个vue插件(2)——vue-awesome-swiper
• 每天学习一个vue插件(3)——eslint + prettier + stylelint
• 每天学习一个vue插件(4)——v-viewer
• 每天学习一个vue插件(5)——postcss-pxtorem
• 每天学习一个vue插件(6)——momentjs
• 每天学习一个vue插件(7)——hammerjs
• 每天学习一个vue插件(8)——mcanvas
• 每天学习一个vue插件(9)——MathJax
• 每天学习一个vue插件(10)——Vue-APlayer
• 每天学习一个vue插件(11)——vue-drag-resize
• 每天学习一个vue插件(12)——vue-fullpage