1、引入JS文件
使用npm安装
npm install html2canvas
vue中使用封装一个全局的方法
在utils文件夹里创建一个htmltoimage.js文件,具体代码如下
import html2canvas from 'html2canvas'
import Vue from 'vue'
const IMAGE = {}
IMAGE.install = function (Vue) {
Vue.prototype.$toImage = function (id, callback) {
const ele = document.querySelector(`#${id}`)
const eleW = ele.offsetWidth// 获得该容器的宽
const eleH = ele.offsetHeight// 获得该容器的高
const scale = 1
const canvas = document.createElement('canvas')
canvas.width = eleW * scale // 将画布宽&&高放大两倍
canvas.height = eleH * scale
canvas.style.width = eleW + 'px'
canvas.style.height = eleH + 'px'
const context = canvas.getContext('2d')
context.scale(scale,