将HTML渲染为图像

你可以添加引用HtmlRenderer到你的项目，并执行以下操作:

string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));

2015-11-11 06:47:44

使用剧作家的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()

2022-11-19 17:21:14

你可以使用像wkhtmltopdf这样的HTML转PDF工具。然后你可以使用像imagemagick这样的PDF图像工具。不可否认，这是服务器端，一个非常复杂的过程…

2012-05-23 14:23:01

我读了Sjeiti的答案，我觉得很有趣，在那里你只需要几行简单的JavaScript就可以在图像中呈现HTML。

当然，我们必须意识到这种方法的局限性(请在他的回答中阅读其中的一些)。

在这里，我进一步使用了他的代码。

svg图像原则上具有无限分辨率，因为它是矢量图形。但您可能已经注意到，Sjeiti的代码生成的图像分辨率并不高。在将SVG-image转移到canvas-element之前，可以通过缩放SVG-image来解决这个问题，我在下面给出的两个(可运行的)示例代码中的最后一个代码中已经做到了这一点。我在该代码中实现的另一件事是最后一步，即将其保存为png文件。只是为了完成整个过程。

因此，我给出了两个可运行的代码片段:

第一个演示了SVG的无限分辨率。运行它并使用浏览器放大，以查看分辨率是否随着放大而减小。

在您可以运行的代码片段中，我已经使用反勾号指定了一个带有换行符的所谓模板字符串，以便您可以更清楚地看到呈现的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);

这里是一个可运行的代码片段。

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图像。

尝试不同的比例。例如，如果您将缩放设置为10，那么您将在生成的png图像中获得非常好的分辨率。我还添加了一个额外的功能:一个复选框，这样你就可以使png图像透明。

注意:

当这个脚本在Stack Overflow运行时，保存按钮在Chrome和Edge中不工作。原因是https://www.chromestatus.com/feature/5706745674465280。

因此，我也把这个片段放在https://jsfiddle.net/7gozdq5v/上，它适用于这些浏览器。

2020-08-24 11:57:56

这就是我所做的。

注意:请检查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;

2020-11-09 12:10:14

我不认为这是最好的答案，但它似乎很有趣，可以发布。

编写一个应用程序，打开您最喜欢的浏览器到所需的HTML文档，适当大小的窗口，并采取屏幕截图。然后，删除图像的边界。

2012-05-23 14:25:06

将HTML渲染为图像

推荐文章

最新文章

标签