有没有办法将 html 渲染成像 PNG 这样的图像？我知道画布是可能的，但我想渲染标准的 html 元素，例如 div。
【问题讨论】：
标签： javascript html css image render
我也关注这个问题。 我发现这是解决您问题的最佳解决方案
我们可以使用html-to-image javascript库将HTML代码转换为图像
npm install html-to-image
HTML 代码
<div>
<div id="capture">
<p>
<span>Heading Of Image</span><br></br>
<span>This is color Image</span><br></br>
<img src="Your/ImagePath/ifany.jpg" width="100%" />
<span>Footer Of the Image</span>
</p>
</div>
<h2>Generated Image</h2>
<div id="real">
</div></div>
Javascript 代码
var htmlToImage = require('html-to-image');
var node = document.getElementById('capture');
htmlToImage.toJpeg(node, { quality: 1, backgroundColor: "#FFFFFF", height: node.clientHeight, width: node.clientWidth })
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
var div = document.getElementById("real")
div.appendChild(img)
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
通过此示例，您现在可以在<div> 标签中看到您的图像，其中id = 'real'。
您现在可以在代码中添加保存和下载或上传图片选项。
【讨论】：
有很多选择，它们都有自己的优点和缺点。
优点
缺点
优点
缺点
优点
缺点
优点
缺点
披露：我是 ApiFlash 的创始人。我尽力提供一个诚实而有用的答案。
【讨论】：
这就是我所做的。
注意：代码请查看 App.js。
如果你喜欢它，你可以给它一个星星。✌️
更新：
import * as htmlToImage from 'html-to-image';
import download from 'downloadjs';
import logo from './logo.svg';
import './App.css';
const App = () => {
const onButtonClick = () => {
var domElement = document.getElementById('my-node');
htmlToImage.toJpeg(domElement)
.then(function (dataUrl) {
console.log(dataUrl);
download(dataUrl, 'image.jpeg');
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
};
return (
<div className="App" id="my-node">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a><br></br>
<button onClick={onButtonClick}>Download as JPEG</button>
</header>
</div>
);
}
export default App;
【讨论】：
我阅读了 Sjeiti 的答案，我觉得这很有趣，您只需几行纯 JavaScript 行就可以在图像中呈现 HTML。
我们当然必须意识到这种方法的局限性（请在他的回答中阅读其中的一些）。
在这里，我将他的代码更进一步。
SVG 图像原则上具有无限分辨率，因为它是矢量图形。但是您可能已经注意到，Sjeiti 的代码生成的图像没有高分辨率。这可以通过在将 SVG 图像传输到画布元素之前对其进行缩放来解决，我在下面给出的两个（可运行）示例代码中的最后一个中完成了这一点。我在该代码中实现的另一件事是最后一步，即将其保存为 PNG 文件。只是为了完成整个事情。
所以，我给出两个可运行的 sn-ps 代码：
第一个演示了 SVG 的无限分辨率。运行它并使用浏览器放大，看看分辨率不会随着放大而降低。
在您可以运行的 sn-p 中，我使用反引号指定了一个带有换行符的所谓模板字符串，以便您可以更清楚地看到呈现的 HTML。但是否则，如果该 HTML 在一行之内，那么代码将非常短，就像这样。
const body = document.getElementsByTagName('BODY')[0];
const img = document.createElement('img')
img.src = 'data:image/svg+xml,' + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="border:1px solid red;padding:20px;"><style>em {color:red;}.test {color:blue;}</style>What you see here is only an image, nothing else.<br /><br /><em>I</em> really like <span class="test">cheese.</span><br /><br />Zoom in to check the resolution!</div></foreignObject></svg>`);
body.appendChild(img);
这里是一个可运行的 sn-p。
const body = document.getElementsByTagName('BODY')[0];
const img = document.createElement('img')
img.src = 'data:image/svg+xml,' + encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml" style="border:1px solid red;padding:20px;">
<style>
em {
color:red;
}
.test {
color:blue;
}
</style>
What you see here is only an image, nothing
else.<br />
<br />
<em>I</em> really like <span class="test">cheese.</span><br />
<br />
Zoom in to check the resolution!
</div>
</foreignObject>
</svg>
`);
body.appendChild(img);放大并检查 SVG 的无限分辨率。
下面的下一个可运行文件实现了我上面提到的两个额外步骤，即通过首先缩放 SVG 来提高分辨率，然后将其保存为 PNG 图像。
window.addEventListener("load", doit, false)
var canvas;
var ctx;
var tempImg;
function doit() {
const body = document.getElementsByTagName('BODY')[0];
const scale = document.getElementById('scale').value;
let trans = document.getElementById('trans').checked;
if (trans) {
trans = '';
} else {
trans = 'background-color:white;';
}
let source = `
<div xmlns="http://www.w3.org/1999/xhtml" style="border:1px solid red;padding:20px;${trans}">
<style>
em {
color:red;
}
.test {
color:blue;
}
</style>
What you see here is only an image, nothing
else.<br />
<br />
<em>I</em> really like <span class="test">cheese.</span><br />
<br />
<div style="text-align:center;">
Scaling:
<br />
${scale} times!
</div>
</div>`
document.getElementById('source').innerHTML = source;
canvas = document.createElement('canvas');
ctx = canvas.getContext('2d');
canvas.width = 200*scale;
canvas.height = 200*scale;
tempImg = document.createElement('img');
tempImg.src = 'data:image/svg+xml,' + encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" width="${200*scale}" height="${200*scale}">
<foreignObject
style="
width:200px;
height:200px;
transform:scale(${scale});
"
>` + source + `
</foreignObject>
</svg>
`);
}
function saveAsPng(){
ctx.drawImage(tempImg, 0, 0);
var a = document.createElement('a');
a.href = canvas.toDataURL('image/png');
a.download = 'image.png';
a.click();
}<table border="0">
<tr>
<td colspan="2">
The claims in the HTML-text is only true for the image created when you click the button.
</td>
</tr>
<tr>
<td width="250">
<div id="source" style="width:200px;height:200px;">
</div>
</td>
<td valign="top">
<div>
In this example the PNG-image will be squarish even if the HTML here on the left is not exactly squarish. That can be fixed.<br>
To increase the resolution of the image you can change the scaling with this slider.
<div style="text-align:right;margin:5px 0px;">
<label style="background-color:#FDD;border:1px solid #F77;padding:0px 10px;"><input id="trans" type="checkbox" onchange="doit();" /> Make it transparent</label>
</div>
<span style="white-space:nowrap;">1<input id="scale" type="range" min="1" max="10" step="0.25" value="2" oninput="doit();" style="width:150px;vertical-align:-8px;" />10 <button onclick="saveAsPng();">Save as PNG-image</button></span>
</div>
</td>
</tr>
</table>尝试不同的缩放比例。例如，如果您将缩放设置为 10，那么您会在生成的 PNG 图像中获得非常好的分辨率。 我还添加了一些额外的功能：一个复选框，以便您可以根据需要使 PNG 图像透明。
当此脚本在 Stack Overflow 上运行时，保存按钮在 Chrome 和 Edge 中不起作用。原因就是这个https://www.chromestatus.com/feature/5706745674465280。
因此，我还将这个 sn-p 放在了适用于这些浏览器的 https://jsfiddle.net/7gozdq5v/ 上。
【讨论】：
<div xmlns="http://www.w3.org/1999/xhtml" style="border:1px solid red;padding:20px;${trans};background-image: url('https://i.ibb.co/9Zvz58h/star.png')">
HtmlToImage.jar 将是将 html 转换为图像的最简单方法
【讨论】：
我知道这是一个相当古老的问题，已经有很多答案，但我仍然花了几个小时试图真正做我想做的事：
使用无头 Chrome（版本 74.0.3729.157），实际上很容易：
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot --window-size=256,256 --default-background-color=0 button.html
命令说明：
--headless 在不打开的情况下运行 Chrome 并在命令完成后退出--screenshot 将截取屏幕截图（请注意，它会在运行命令的文件夹中生成一个名为 screenshot.png 的文件）--window-size 只允许截取屏幕的一部分（格式为--window-size=width,height）--default-background-color=0 是告诉 Chrome 使用透明背景而不是默认白色【讨论】：
--screenshot='absolute\path\of\screenshot.png' 为我工作
这里的所有答案都使用第三方库，而在纯 Javascript 中将 HTML 渲染到图像可能相对简单。 is 在 MDN 的画布部分甚至有 an article about it。
诀窍是这样的：
drawImage 在画布上const {body} = document
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = canvas.height = 100
const tempImg = document.createElement('img')
tempImg.addEventListener('load', onTempImageLoad)
tempImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>')
const targetImg = document.createElement('img')
body.appendChild(targetImg)
function onTempImageLoad(e){
ctx.drawImage(e.target, 0, 0)
targetImg.src = canvas.toDataURL()
}注意事项
【讨论】：
Document 渲染为光栅（例如Canvas）很可能是微不足道的，但是因为没有人愿意对其进行标准化，所以我们不得不像上图那样诉诸疯狂（不冒犯此代码的作者）。
使用此代码，它肯定会工作：
<script type="text/javascript">
$(document).ready(function () {
setTimeout(function(){
downloadImage();
},1000)
});
function downloadImage(){
html2canvas(document.querySelector("#dvContainer")).then(canvas => {
a = document.createElement('a');
document.body.appendChild(a);
a.download = "test.png";
a.href = canvas.toDataURL();
a.click();
});
}
</script>只是不要忘记在你的程序中包含 Html2CanvasJS 文件。 https://html2canvas.hertzen.com/dist/html2canvas.js
【讨论】：
使用 html2canvas 只需包含插件和调用方法将 HTML 转换为 Canvas 然后下载为图像 PNG
html2canvas(document.getElementById("image-wrap")).then(function(canvas) {
var link = document.createElement("a");
document.body.appendChild(link);
link.download = "manpower_efficiency.jpg";
link.href = canvas.toDataURL();
link.target = '_blank';
link.click();
});
来源：http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/
【讨论】：
我为 Chrome、Firefox 和 MS Edge 工作的唯一库是 rasterizeHTML。它输出比 HTML2Canvas 更好的质量，并且与 HTML2Canvas 不同的是仍然受支持。
获取元素并以 PNG 格式下载
var node= document.getElementById("elementId");
var canvas = document.createElement("canvas");
canvas.height = node.offsetHeight;
canvas.width = node.offsetWidth;
var name = "test.png"
rasterizeHTML.drawHTML(node.outerHTML, canvas)
.then(function (renderResult) {
if (navigator.msSaveBlob) {
window.navigator.msSaveBlob(canvas.msToBlob(), name);
} else {
const a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = canvas.toDataURL();
a.download = name;
a.click();
document.body.removeChild(a);
}
});
【讨论】：
rasterizeHTML.drawHTML(node.innerHTML, canvas) 请注意，我在节点上调用了 innerHTML
安装 phantomjs
$ npm install phantomjs
使用以下代码创建文件 github.js
var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 768 };
page.open('http://github.com/', function() {
page.render('github.png');
phantom.exit();
});
将文件作为参数传递给 phantomjs
$ phantomjs github.js
【讨论】：
是的。 HTML2Canvas 用于将 HTML 渲染到 <canvas>（然后您可以将其用作图像）。
注意：有一个已知问题，这不适用于 SVG
【讨论】：
您可以添加参考 HtmlRenderer 到您的项目并执行以下操作，
string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));
【讨论】：
我可以推荐dom-to-image 库，它是专门为解决这个问题而编写的（我是维护者）。
以下是你如何使用它（更多here）：
var node = document.getElementById('my-node');
domtoimage.toPng(node)
.then (function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
【讨论】：
domtoimage.toSvg），然后在画布上自己渲染并尝试以某种方式使用该画布的分辨率。可能可以在库本身中实现某种渲染选项等功能，因此您可以以像素为单位传递图像尺寸。如果你需要它，我会很感激你在 github 上创建一个问题。
仅使用 JavaScript 无法 100% 准确地做到这一点。
那里有一个 Qt Webkit tool out 和一个 python version。如果你想自己做，我已经用 Cocoa 成功了：
[self startTraverse:pagesArray performBlock:^(int collectionIndex, int pageIndex) {
NSString *locale = [self selectedLocale];
NSRect offscreenRect = NSMakeRect(0.0, 0.0, webView.frame.size.width, webView.frame.size.height);
NSBitmapImageRep* offscreenRep = nil;
offscreenRep = [[NSBitmapImageRep alloc] initWithBitmapDataPlanes:nil
pixelsWide:offscreenRect.size.width
pixelsHigh:offscreenRect.size.height
bitsPerSample:8
samplesPerPixel:4
hasAlpha:YES
isPlanar:NO
colorSpaceName:NSCalibratedRGBColorSpace
bitmapFormat:0
bytesPerRow:(4 * offscreenRect.size.width)
bitsPerPixel:32];
[NSGraphicsContext saveGraphicsState];
NSGraphicsContext *bitmapContext = [NSGraphicsContext graphicsContextWithBitmapImageRep:offscreenRep];
[NSGraphicsContext setCurrentContext:bitmapContext];
[webView displayRectIgnoringOpacity:offscreenRect inContext:bitmapContext];
[NSGraphicsContext restoreGraphicsState];
// Create a small + large thumbs
NSImage *smallThumbImage = [[NSImage alloc] initWithSize:thumbSizeSmall];
NSImage *largeThumbImage = [[NSImage alloc] initWithSize:thumbSizeLarge];
[smallThumbImage lockFocus];
[[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh];
[offscreenRep drawInRect:CGRectMake(0, 0, thumbSizeSmall.width, thumbSizeSmall.height)];
NSBitmapImageRep *smallThumbOutput = [[NSBitmapImageRep alloc] initWithFocusedViewRect:CGRectMake(0, 0, thumbSizeSmall.width, thumbSizeSmall.height)];
[smallThumbImage unlockFocus];
[largeThumbImage lockFocus];
[[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh];
[offscreenRep drawInRect:CGRectMake(0, 0, thumbSizeLarge.width, thumbSizeLarge.height)];
NSBitmapImageRep *largeThumbOutput = [[NSBitmapImageRep alloc] initWithFocusedViewRect:CGRectMake(0, 0, thumbSizeLarge.width, thumbSizeLarge.height)];
[largeThumbImage unlockFocus];
// Write out small
NSString *writePathSmall = [issueProvider.imageDestinationPath stringByAppendingPathComponent:[NSString stringWithFormat:@"/%@-collection-%03d-page-%03d_small.png", locale, collectionIndex, pageIndex]];
NSData *dataSmall = [smallThumbOutput representationUsingType:NSPNGFileType properties: nil];
[dataSmall writeToFile:writePathSmall atomically: NO];
// Write out lage
NSString *writePathLarge = [issueProvider.imageDestinationPath stringByAppendingPathComponent:[NSString stringWithFormat:@"/%@-collection-%03d-page-%03d_large.png", locale, collectionIndex, pageIndex]];
NSData *dataLarge = [largeThumbOutput representationUsingType:NSPNGFileType properties: nil];
[dataLarge writeToFile:writePathLarge atomically: NO];
}];
希望这会有所帮助！
【讨论】：
我不认为这是最好的答案，但发帖似乎很有趣。
编写一个应用程序，将您最喜欢的浏览器打开到所需的 HTML 文档、适当调整窗口大小并截屏。然后，移除图像的边框。
【讨论】：
您可以使用 wkhtmltopdf 等 HTML 转 PDF 工具。然后你可以使用像 imagemagick 这样的 PDF 图像工具。诚然，这是服务器端和一个非常复杂的过程......
【讨论】：
Node.js的。简单的前端怎么样？