HTML代码转canvas-图标

Posted 2021-10-05 王李

用法:
1.装包: npm i html2canvas

2.导包: import html2canvas from \'html2canvas\'

3.用包:

<template>
  <div>
    <div ref="box" class="box">
      <h2>我是盒子</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis,
        itaque aut. Est, nobis nisi, cum soluta pariatur labore modi minus
        tempora porro optio quas quasi ut expedita, sequi aperiam maxime.
      </p>
    </div>
    <img :src="src"  />
  </div>
</template>

<script>
import html2canvas from \'html2canvas\'
export default {
  data () {
    return {
      src: \'\'
    }
  },
  mounted () {
    html2canvas(this.$refs.box).then(canvas => {
      const url = canvas.toDataURL()
      console.log(url)
      this.src = url
    })
  }
}
</script>

<style>
.box {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    skyblue,
    blue,
    purple
  );
}
.box h2 {
  color: white;
}
img {
  width: 100%;
}
</style>

关于html2canvas相关链接
npm-html2canvas:https://www.npmjs.com/package/html2canvas

简书 -html2canva2s:https://www.jianshu.com/p/abd9e9c5ba20

canvasAPI - toDataURL:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL