前端生成图片组件 HTML2Canvas

前面是讲解部分后面会提供全部代码

经常会有手机端要求做输入内容然后生成图片的。当然可以把数据传给后端，然后后端生成图片返回地址。
而前端生成图片可以更加美观一些。 这里我们可以用到html2canvas 组件
安装html2canvas

npm install html2canvas -S

引入html2canvas

import html2canvas from 'html2canvas';

现在我们需要来使用它
我们再vue中使用他，首先需要给想要生成图片的地方添加一个ref

<div ref="image" class="wrap">
      <div class="l-form" style="text-indent:2em;" v-if="showhtml">
        <input v-model="name" style=" width:12vw; text-align:left; padding: 0px;"/>
        <div style="text-indent:2em; margin-bottom:1vw;"><span>您好！</span></div>
      </div>
</div>

生成时使用
js

 html2canvas(this.$refs.image, {
        backgroundColor: null
      }).then((canvas) => {
        let dataURL = canvas.toDataURL('image/png')//这里的dataURL 就是生成的图片的地址 这是将 图片的地址赋给 要显示的img 的src
        this.img = dataURL
      })

html

<img :src = "img"> //此时图片就时页面生成的了

完整代码

<template>
  <div class="wrap2" >
    <img :src="imgurl" class="image" v-if="showImage"/>
    <div ref="image" class="wrap">
      <div class="l-form" style="text-indent:2em;" v-if="showhtml">
        <input v-model="name" style=" width:12vw; text-align:left; padding: 0px;"/>
        <div style="text-indent:2em; margin-bottom:1vw;"><span>您好！</span></div>
      </div>
    </div>
    <mt-button type="primary" class="btn" @click="handleImage" v-if="show">生成图片</mt-button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
  data () {
    return {
      name: '',
      show: true,
      imgurl: '',
      showImage: false,
      showhtml: true
    }
  },
  methods: {
    handleImage () {
      console.log(this.name)
      this.show = false
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
      html2canvas(this.$refs.image, {
        backgroundColor: null
      }).then((canvas) => {
        let dataURL = canvas.toDataURL('image/png')
        this.imgurl = dataURL
        this.showImage = true
        this.showhtml = false
      })
    },
    toTop () {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }
}
</script>

<style lang="scss" scoped>
/*此处是定义字体 在使用的时候 直接使用font-family: MyCustomFont*/
@font-face{
 font-family: MyCustomFont;
 src: url("../assets/思源黑体-常规.otf"); 
}
span{
  font-family: MyCustomFont;
  color: #4b4a66;
  font-size: 4vw;
}
.wrap{
  width: 100%;
  height: 100%;
  background: url('../assets/bg.jpg');
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.wrap2{
  width: 100%;
  height: 100%;
  // background: url('../assets/bg.jpg');
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .l-form{
    padding: 0 10vw;
    padding-bottom: 4vw;
  }
  input{
    width: 14vw;
    font-size: 4vw;
    border: none;
    border-bottom: 0.2vw solid #4b4a66;
    border-radius: 0;
    outline: none;
    font-family: MyCustomFont;
    color: #4b4a66;
    text-align: center;
  }
  .date{
    position: absolute;
    bottom: 15%;
    right: 10%;
  }
  .btn{
    position: absolute;
    left: 10%;
    bottom: 16%;
  }
  .image{
    width: 100%;
    height: 100%;
  }
}
</style>