乐趣区

关于vue.js:Vue项目中使用html2canvas生成页面截图

1. 我的项目中引入 html2canvas

npm install html2canvas

2. html 局部
<div class="html2canvas" ref="html2canvas">
3. js 局部
import html2canvas from 'html2canvas'

export default {mounted () {this.toImage()
  },
  methods: {toImage () {
      html2canvas(this.$refs.html2canvas, {
        width: 300,
        height: 300,
        backgroundColor: null,
        useCORS: true // 解决文件跨域问题
      }).then(canvas => {let url = canvas.toDataURL('image/png') // 生成的图片
        // 能够上传后端或者间接显示
        
      })   
    }
  }
}
退出移动版