html标签生成img图片

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,