@winman-f2e/html2img

html转图片

将html的页面转为图片

开始安装

$ npm install @winman-f2e/html2img

如何使用

import html2img from '@winman-f2e/html2img'

html2img({
  html: '<h1>hello</h1>',
  width: 750,
  height: 750 * document.documentElement.clientHeight / document.documentElement.clientWidth
}).then(imgUrl => {
  if (imgUrl) {
    const img = new Image()
    img.src = imgUrl
    img.onload = () => {
      document.getElementById('root').innerHTML = `<img src="${imgUrl}" style="width: 100%;" alt="img" />`
    }
  } else {
    document.getElementById('root').innerHTML = '<h3>图片生成失败</h3>'
  }
}, errorMsg => {
  document.getElementById('root').innerHTML = `<h3>图片生成失败：${errorMsg}</h3>`
}).catch(console.error)

API

options[object]

• html：页面的html字符串
• width：页面宽度
• height：页面高度

返回值：Promise，参数：

• resolve(imgUrl)：图片链接
• reject(errorMsg)：错误信息

环境配置

构建工具

$ npm install -g fle-cli

# yarn
$ yarn global add fle-cli

命令说明

# 本地开发
fle dev

# 代码构建
fle build

查看更多说明： 构建文档

补充说明

【备注】