html-to-image将 DOM 节点转换成图像的工具
html-to-image 是一个使用 HTML5 canvas 和 SVG 从 DOM 节点生成图像的工具。
安装
npm install --save html-to-image
用法
/* 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');
所有顶级函数都接受 DOM 节点和渲染选项,并返回一个由相应 dataURL 实现的承诺:
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); });
获取 PNG 图像 base64 编码的数据 URL 并下载它(使用download):
htmlToImage.toPng(document.getElementById('my-node')) .then(function (dataUrl) { download(dataUrl, 'my-node.png'); });
toSvg
获取 SVG 数据 URL,但过滤掉所有<i>元素:
function filter (node) { return (node.tagName !== 'i'); } htmlToImage.toSvg(document.getElementById('my-node'), { filter: filter }) .then(function (dataUrl) { /* do something */ });
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(); });
评论
html-to-image将 DOM 节点转换成图像的工具
html-to-image是一个使用HTML5canvas和SVG从DOM节点生成图像的工具。安装npminstall--savehtml-to-image用法/*ES6*/import*ashtml
html-to-image将 DOM 节点转换成图像的工具
0
DOM Treemap查看 DOM 节点的扩展
DOMTreemap是一个Chrome和FirefoxDevTools扩展,用于查看文档树中DOM节点的分布。DOMTreemap通过额外的面板扩展了DevtoolsElements选项卡,该面板会显
DOM Treemap查看 DOM 节点的扩展
0
轻松将网页转换成轻量级多端桌面应用的工具
大家好,又见面了,我是 GitHub 精选君!背景介绍在现代软件开发过程中,桌面应用的需求依然旺盛。不论是为了提高工作效率,还是改善用户体验,开发者们常常需要将网页应用转化为桌面应用。然而,传统的桌面应用开发既耗时又复杂,特别是当需要同时支持 Mac、Windows 和 Linux 三大平台时。此外
开源你我他
0
cn2tw4programmer将常用的计算机词汇转换成繁体中文
cn2tw4programmer是一个Chrome插件,但它并不是将简体中文转换成繁体中文,而是将简体中文里常用的计算机词汇转换成繁体中文。总的来说,这是一个面向使用繁体字人群的插件。
cn2tw4programmer将常用的计算机词汇转换成繁体中文
0
cn2tw4programmer将常用的计算机词汇转换成繁体中文
cn2tw4programmer 是一个 Chrome 插件,但它并不是将简体中文转换成繁体中文,而
cn2tw4programmer将常用的计算机词汇转换成繁体中文
0