html2canvas使用指南

1、安装

npm install html2canvas --save

2、使用
在页面引入,import html2canvas from 'html2canvas

3、使用示例

<template>
  <div class="view-wrap">
    <h3>我是canvas图片文字合成组件</h3>
    <div class="editbox" ref="editbox">
      <div>我是文字</div>
      <div class="imgbox"></div>
      <div>我是文字1</div>
    </div>
    <el-button type="primary" @click="handleConposeImg">合成</el-button>
    <img :src="dataURL" alt />
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
  components: {},
  data() {
    return {
      dataURL: '' // 保持截屏操作后的base64数据地址
    }
  },
  computed: {},
  methods: {
    handleConposeImg() {
      this.toImage()
    },
    toImage() {
      return new Promise((resolve, reject) => {
        html2canvas(this.$refs.editbox, {
          useCORS: true,
          allowTaint: true,
          scale: 0.5,
          width: 800,
          height: 500
        }).then(canvas => {
          const dataURL = canvas.toDataURL('image/png')
          this.dataURL = dataURL
          console.log(this.dataURL)
          resolve(dataURL)
        })
      })
    }
  },
  mounted() { }
}
</script>

<style lang="scss" scoped>
.editbox {
  height: 500px;
  width: 800px;
  border: 1px solid #555;
}
.imgbox {
  height: 400px;
  width: 500px;
  background-image: url(http://p1.pstatp.com/large/435d000085555bd8de10);
  background-size: 100% 100%;
}
</style>

注意：默认返回的dateURL字符串前面是有一串格式说明的字符，传递给后端，需要将前面的data:...,这串字符去掉，后台才能正常转换为图片。
截取操作：

const base64String = dataURL.toString().substring(dataURL.indexOf(',') + 1) // 截取base64以便上传

base64String 后台就可以拿到正确的图片字符串了。
4、官方文档
http://html2canvas.hertzen.com/configuration