将HTML渲染为图像

是否有一种方法将html渲染成PNG那样的图像?我知道这是可能的与画布，但我想渲染标准的html元素，如div为例。

当前回答

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

其他回答

这就是我所做的。

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

这里所有的答案都使用第三方库，而在纯Javascript中将HTML渲染为图像可以相对简单。在MDN的画布部分甚至有一篇关于它的文章。

诀窍是这样的:

使用包含XHTML的foreignObject节点创建SVG 将图像的src设置为该SVG的数据url 将图像绘制到画布上将画布数据设置为目标image.src

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() }

需要注意的一些事情

The HTML inside the SVG has to be XHTML For security reasons the SVG as data url of an image acts as an isolated CSS scope for the HTML since no external sources can be loaded. So a Google font for instance has to be inlined using a tool like this one. Even when the HTML inside the SVG exceeds the size of the image it wil draw onto the canvas correctly. But the actual height cannot be measured from that image. A fixed height solution will work just fine but dynamic height will require a bit more work. The best is to render the SVG data into an iframe (for isolated CSS scope) and use the resulting size for the canvas.

2018-10-30 15:03:06

我读了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

我推荐这个npm包“html-to-image”

描述: ✂️使用HTML5画布和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';

获取一个PNG图像base64编码的数据URL并下载它(使用download):

htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    download(dataUrl, 'my-node.png');
  });

2023-01-16 10:41:28

是的。HTML2Canvas的存在是为了将HTML渲染到<canvas>上(你可以将其用作图像)。

注意:有一个已知的问题，这将不适用于SVG

2012-05-23 14:26:00

将HTML渲染为图像

推荐文章

最新文章

标签