Html-to-img NPM

html-to-img

使用

npm i html-to-img -S

import html2img from 'html-to-img'

html2img(
    document.getElementById('demo'),
).then(
    src => console.log(src)
)

Vue 中使用

import htmlToImg, { vueComponentToHtml } from 'html-to-img'
import Vue from 'vue'

const WordsPoster = {
    render(h) {
        return h('div')
    }
}

htmlToImg(
    vueComponentToHtml(WordsPoster, Vue)
).then(
    src => console.log(src)
)

当然这样直接转换 img 不容易调试，所以需要使用第二个参数 options，options 包含如下的参数

参数名称	用途	默认值
debug	用来调试，开启之后不会转成图片	false
scale	缩放比例，比例越高清晰度越高，当然图片也就越大	2
base64	将dom中的图片地址都转成base64	false

为什么会有 base64 这个选项呢？