@winman-f2e/html2img

A library created by fle-cli.

Usage no npm install needed!

<script type="module">
  import winmanF2eHtml2img from 'https://cdn.skypack.dev/@winman-f2e/html2img';
</script>

README

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

查看更多说明: 构建文档

补充说明

【备注】