关于javascript:HTML代码转canvas图标

42次阅读

共计 905 个字符，预计需要花费 3 分钟才能阅读完成。

用法:
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" alt="" />
  </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

正文完