html-to-image 将 DOM 节点转换成图像的工具

html-to-image是一个使用HTML5canvas和SVG从DOM节点生成图像的工具。

安装npminstall--savehtml-to-image用法/*ES6*/import*ashtmlToImagefrom'html-to-image';import{toPng,toJpeg,toBlob,toPixelData,toSvg}from'html-to-image';/*ES5*/varhtmlToImage=require('html-to-image');所有顶级函数都接受DOM节点和渲染选项，并返回一个由相应dataURL实现的承诺：

toPngtoSvgtoJpegtoBlobtoCanvastoPixelDatatoPng获取一个PNG图像base64编码的数据URL并立即显示它：

varnode=document.getElementById('my-node');htmlToImage.toPng(node).then(function(dataUrl){varimg=newImage();img.src=dataUrl;document.body.appendChild(img);}).catch(function(error){console.error('oops,somethingwentwrong!',error);});获取PNG图像base64编码的数据URL并下载它（使用download）：

htmlToImage.toPng(document.getElementById('my-node')).then(function(dataUrl){download(dataUrl,'my-node.png');});toSvg获取SVG数据URL，但过滤掉所有<i>元素：

functionfilter(node){return(node.tagName!=='i');}htmlToImage.toSvg(document.getElementById('my-node'),{filter:filter}).then(function(dataUrl){/*dosomething*/});toJpeg保存并下载压缩的JPEG图像：

htmlToImage.toJpeg(document.getElementById('my-node'),{quality:0.95}).then(function(dataUrl){varlink=document.createElement('a');link.download='my-image-name.jpeg';link.href=dataUrl;link.click();});

html-to-image 将 DOM 节点转换成图像的工具开源项目

作品详情

重点城市程序员兼职推荐

重点岗位程序员兼职推荐