html页面生成图片-前端解决方案：vue+html2canvas

一、前言

背景：最近有一个需求，要根据html页面，生成一个图片，并发送邮件。
前端架构：vue+iview。
技术选择：html2canvas 生成图片
前提条件：npm i html2canvas

二、代码实现

1. 编写toImage函数：

创建一个htmltoimage.js文件,然后在main.js引入

import html2canvas from 'html2canvas'
import Vue from 'vue'

const IMAGE = {}

IMAGE.install = function(Vue, options) {
  Vue.prototype.$toImage = function(id, imgName) {
    const ele = document.querySelector(`#${id}`)
    const eleW = ele.offsetWidth// 获得该容器的宽
    const eleH = ele.offsetHeight// 获得该容器的高

    const scale = 2
    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, scale)
    html2canvas(ele, {
      dpi: 300,
      // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
      useCORS: true, // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
      scale: scale
    }).then((canvas) => {
      const pageData = canvas.toDataURL('image/jpeg', 1.0).replace('image/png', 'image/octet-stream')
      document.querySelector('#day-image').setAttribute('src', pageData)
    })
  }
}

Vue.use(IMAGE)
export default IMAGE

2. vue文件中调用

htmlToImg() {
      this.$toImage('day-report', '截图')
    },

三、问题

主要是生成的图片比较模糊。只能做一些比较小的改变，找了很久，没有找到完美的解决方案。
1、如果页面有canvas，最后转成svg的方式
2、背景图使用img的形式
3、css样式自己写，不要使用element等组件