是否有一种方法将html渲染成PNG那样的图像?我知道这是可能的与画布,但我想渲染标准的html元素,如div为例。
当前回答
是的,你可以用HTML2Canvas库它渲染你的HTML代码到画布。 它提供了将html从特定div转换为图像的选项,然后使用canvas2image将图像本地下载到您的文件系统中。
链接源代码
html2canvas(document.querySelector('#screenscoot'), {
onrendered: function(canvas) {
// document.body.appendChild(canvas);
return Canvas2Image.saveAsPNG(canvas);
}
});
其他回答
你可以添加引用HtmlRenderer到你的项目,并执行以下操作:
string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));
我也在思考这个问题。 我发现这是解决你问题的最好办法
我们可以使用javascript的HTML -to-image库将HTML代码转换为图像
NPM安装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'。 现在可以在代码中添加保存和下载或上传图像选项。
使用剧作家的page.screen()可以非常容易地截取屏幕截图。例如使用Python(但它也适用于Node.js, Java和.NET):
from playwright.async_api import async_playwright
async with async_playwright() as p:
browser = await p.chromium.launch()
page = await browser.new_page()
await page.goto('https://google.com')
await page.screenshot(path=f'screenshot.png')
await browser.close()
我知道这是一个已经有很多答案的老问题,但我仍然花了很多时间去做我想做的事情:
给定一个HTML文件,从命令行生成一个带有透明背景的(png)图像
使用Chrome headless (version 74.0.3729.157),实际上很容易:
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot --window-size=256,256 --default-background-color=0 button.html
命令使用说明:
you run Chrome from the command line (here shown for the Mac, but assuming similar on Windows or Linux) --headless runs Chrome without opening it and exits after the command completes --screenshot will capture a screenshot (note that it generates a file called screenshot.png in the folder where the command is run) --window-size allow to only capture a portion of the screen (format is --window-size=width,height) --default-background-color=0 is the magic trick that tells Chrome to use a transparent background, not the default white color finally you provide the html file (as a url either local or remote...)
我不认为这是最好的答案,但它似乎很有趣,可以发布。
编写一个应用程序,打开您最喜欢的浏览器到所需的HTML文档,适当大小的窗口,并采取屏幕截图。然后,删除图像的边界。