Github每日精选（第60期）：使用 HTML5 画布从 DOM 节点生成图像html-to-image

html-to-image

html-to-image 是一个库，可以将任意 DOM 节点转换为矢量（SVG）或光栅（PNG 或 JPEG）图像，用 JavaScript 编写。它基于Paul Bakaus 的 domvas 并已完全重写，修复了一些错误并添加了一些新功能（如网络字体和图像支持）。

在github上的地址在这里。

安装

npm install --save html-to-image
1

使用

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');
1
2
3
4
5
6

toPNG

获取 PNG 图片 base64 编码的数据 URL 并立即显示：

var node = document.getElementById('my-node');

htmlToImage.toPng(node)
  .then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch(function (error) {
    console.error('oops, something went wrong!', error);
  });
1
2
3
4
5
6
7
8
9
10
11

获取 PNG 图片 base64 编码的数据 URL 并下载

htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    download(dataUrl, 'my-node.png');
  });
1
2
3
4

tosvg

获取 SVG 数据 URL，但过滤掉所有元素：

function filter (node) {
  return (node.tagName !== 'i');
}

htmlToImage.toSvg(document.getElementById('my-node'), { filter: filter })
  .then(function (dataUrl) {
    /* do something */
  });
1
2
3
4
5
6
7
8

toJpeg

保存并下载压缩的 JPEG 图像：

htmlToImage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
  .then(function (dataUrl) {
    var link = document.createElement('a');
    link.download = 'my-image-name.jpeg';
    link.href = dataUrl;
    link.click();
  });
1
2
3
4
5
6
7

toBlob

获取 PNG 图像 blob 并下载

htmlToImage.toBlob(document.getElementById('my-node'))
  .then(function (blob) {
    if (window.saveAs) {
      window.saveAs(blob, 'my-node.png');
    } else {
     FileSaver.saveAs(blob, 'my-node.png');
   }
  });
1
2
3
4
5
6
7
8

toCanvas

获取一个 HTMLCanvasElement，并立即显示它：

htmlToImage.toCanvas(document.getElementById('my-node'))
  .then(function (canvas) {
    document.body.appendChild(canvas);
  });
1
2
3
4

toPixelData

以Uint8Array 形式获取原始像素数据，每 4 个数组元素代表一个像素的 RGBA 数据：

var node = document.getElementById('my-node');

htmlToImage.toPixelData(node)
  .then(function (pixels) {
    for (var y = 0; y < node.scrollHeight; ++y) {
      for (var x = 0; x < node.scrollWidth; ++x) {
        pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
        /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
        pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
      }
    }
  });
1
2
3
4
5
6
7
8
9
10
11
12

React

import React, { useCallback, useRef } from 'react';
import { toPng } from 'html-to-image';

const App: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null)

  const onButtonClick = useCallback(() => {
    if (ref.current === null) {
      return
    }

    toPng(ref.current, { cacheBust: true, })
      .then((dataUrl) => {
        const link = document.createElement('a')
        link.download = 'my-image-name.png'
        link.href = dataUrl
        link.click()
      })
      .catch((err) => {
        console.log(err)
      })
  }, [ref])

  return (
    <>
      <div ref={ref}>
      {/* DOM nodes you want to convert to PNG */}
      </div>
      <button onClick={onButtonClick}>Click me</button>
    </>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32