type
Post
status
Published
date
Nov 8, 2023
slug
summary
好东西不分享等于浪费,快来Get这个DOM图片神器!
tags
Javascript
category
Javascript
icon
password
介绍
dom-to-image是一个JavaScript库,可以把浏览器中的DOM节点转成图片。它的主要功能包括:
- 从DOM节点生成图片 可以针对任意的DOM节点,调用domtoimage.toPng(node)或domtoimage.toJpeg(node)等方法,就可以生成对应的图片文件。
- 自定义图片属性 可以通过options参数,自定义生成图片的属性,比如宽高、背景色等。
- 支持多种输出格式 支持PNG、JPEG、WEBP等多种图片格式的输出。
- 支持跨域图片 对于DOM节点中引用的跨域图片,dom-to-image可以正确获取处理。
- 支持延迟加载 对于还未完全加载的节点,可以设置delay参数,延迟一定时间后再生成图片。
- 支持多种浏览器 广泛兼容主流浏览器,包括IE10+。
使用示例:
有个大聪明就要说了，我不想在项目里引入使用，只想要在网页中直接将我需要的dom元素转成图片下载下来。当然没问题~
应用
1. 在console控制台引入
dom-to-image(cnd源可自行更换)2. 在console控制台输入以下代码回车即可在网页上看到生成的图片
3. 下载图片--右键图片另存为即可
