介绍
dom-to-image是一个JavaScript库,可以把浏览器中的DOM节点转成图片。它的主要功能包括:
- 从DOM节点生成图片
可以针对任意的DOM节点,调用domtoimage.toPng(node)或domtoimage.toJpeg(node)等方法,就可以生成对应的图片文件。 - 自定义图片属性
可以通过options参数,自定义生成图片的属性,比如宽高、背景色等。 - 支持多种输出格式
支持PNG、JPEG、WEBP等多种图片格式的输出。 - 支持跨域图片
对于DOM节点中引用的跨域图片,dom-to-image可以正确获取处理。 - 支持延迟加载
对于还未完全加载的节点,可以设置delay参数,延迟一定时间后再生成图片。 - 支持多种浏览器
广泛兼容主流浏览器,包括IE10+。
使用示例:
import domtoimage from 'dom-to-image';
const node = document.getElementById('my-node');
domtoimage.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);
});
有个大聪明就要说了，我不想在项目里引入使用，只想要在网页中直接将我需要的dom元素转成图片下载下来。当然没问题~
应用
1. 在console控制台引入dom-to-image(cnd源可自行更换)
var script = document.createElement('script');
script.src = "https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/dom-to-image/2.6.0/dom-to-image.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
2. 在console控制台输入以下代码回车即可在网页上看到生成的图片
//my-node为你需要转成图片的dom元素的id或者可用其他方法获取需要的元素如getElementsByTagName...
var node = document.getElementById('my-node');
domtoimage.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);
});
3. 下载图片--右键图片另存为即可
