Web前端之domToImage文档、html标签元素转成图片

使用DOMtoImage将DOM转换为图像

原创

已于 2024-08-31 13:01:34 修改 · 1.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

于 2023-07-26 16:12:38 首次发布

DOMtoImage是一个JavaScript库，能将任意DOM节点转换为SVG或PNG/JPEG图像。它基于PaulBakaus的domvas并进行了重写，修复了一些错误并添加了新特性，如网络字体和图片支持。该库可以通过NPM或Bower安装，并提供了多种方法将DOM节点渲染成不同格式的图像数据URL或Blob对象，用于下载或显示。

DOM to Image

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HzbkhAXc-1690359033652)(https://travis-ci.org/tsayen/dom-to-image.svg?branch=master)]

What is it

dom-to-image is a library which can turn arbitrary DOM node into
a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It’s
based on domvas by Paul Bakaus
and has been completely rewritten, with some bugs fixed and some new
features (like web font and image support) added.

Installation

NPM

npm install dom-to-image

Then load

/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');

Bower

bower install dom-to-image

Include either src/dom-to-image.js or dist/dom-to-image.min.js in your page
and it will make the domtoimage variable available in the global scope.

<script src="path/to/dom-to-image.min.js" />
<script>
  domtoimage.toPng(node)
  //...
</script>

Usage

All the top level functions accept DOM node and rendering options,
and return promises, which are fulfilled with corresponding data URLs.
Get a PNG image base64-encoded data URL and display right away:

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

domtoimage.toPng(node)
    .then(function (dataUrl) {
   
   
        var img = new Image();
        img.src = dataUrl;