javascript - 将 HTML 渲染为图像

Question

有没有办法将html呈现为像PNG这样的图像？我知道画布是可能的，但我想渲染标准的 html 元素，例如 div 。

Answer 1

有很多选择，它们都有自己的优点和缺点。

选项 1：使用 API

• ApiFlash（基于 chrome）
• EvoPDF（有 html 选项）
• 格拉布齐特
• HTML/CSS 到图像 API
• ...

优点

• 执行 Javascript
• 近乎完美的渲染
• 正确使用缓存选项时速度快
• 规模由 API 处理
• 精确的时间，视口，...
• 大多数时候他们提供免费计划

缺点

• 如果您打算大量使用它们，则不是免费的

选项 2：使用众多可用库之一

• 域到图像
• wkhtmltoimage（包含在 wkhtmltopdf 工具中）
• IMGKit（用于 ruby​​ 并基于 wkhtmltoimage）
• imgkit（用于 python 并基于 wkhtmltoimage）
• python-webkit2png
• ...

优点

• 大多数时候转换非常快

缺点

• 渲染不良
• 不执行 javascript
• 不支持最近的 Web 功能（FlexBox、高级选择器、Webfonts、Box Sizing、媒体查询......）
• 有时不那么容易安装
• 规模复杂

选项 3：使用 PhantomJs 和包装库

• 幻影
• node-webshot（PhantomJs 的 javascript 包装库）
• ...

优点

• 执行 Javascript
• 蛮快

缺点

• 渲染不良
• 不支持最近的 Web 功能（FlexBox、高级选择器、Webfonts、Box Sizing、媒体查询......）
• 规模复杂
• 如果要加载图像，要让它工作就不是那么容易了……

选项 4：使用 Chrome Headless 和包装库

• 无头镀铬
• chrome-devtools-协议
• Puppeteer（Chrome 无头的 javascript 包装库）
• ...

优点

• 执行 Javascript
• 近乎完美的渲染

缺点

• 获得关于以下方面的确切结果并不容易：
  • 页面加载时间
  • 视口尺寸
• 规模复杂
• 如果 html 包含外部链接，则相当慢甚至更慢

披露：我是 ApiFlash 的创始人。我尽我所能提供一个诚实和有用的答案。

Answer 2

是的。HTML2Canvas 的存在是为了将 HTML 渲染到上面<canvas>（然后您可以将其用作图像）。

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

Answer 3

我可以推荐dom-to-image库，它是专门为解决这个问题而编写的（我是维护者）。
这是你如何使用它（更多在这里）：

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

Answer 4

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

诀窍是这样的：

• 使用包含您的 XHTML 的 foreignObject 节点创建一个 SVG
• 将图像的 src 设置为该 SVG 的数据 url
• drawImage到画布上
• 将画布数据设置为目标 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()
}

一些注意事项

• SVG 中的 HTML 必须是 XHTML
• 出于安全原因，SVG 作为图像的数据 url 充当 HTML 的隔离 CSS 范围，因为无法加载外部源。因此，例如必须使用像这样的工具内联 Google 字体。
• 即使 SVG 中的 HTML 超过了图像的大小，它也会正确地绘制到画布上。但是无法从该图像中测量实际高度。固定高度解决方案可以正常工作，但动态高度需要更多工作。最好的办法是将 SVG 数据渲染到 iframe 中（用于隔离 CSS 范围），并将结果大小用于画布。

Answer 5

我知道这是一个相当古老的问题，已经有很多答案，但我仍然花了几个小时试图真正做我想做的事：

• 给定一个 html 文件，从命令行生成一个具有透明背景的 (png) 图像

使用 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

命令解释：

• 您从命令行运行 Chrome（此处显示的是 Mac，但假设在 Windows 或 Linux 上类似）
• --headless运行 Chrome 而不打开它并在命令完成后退出
• --screenshotscreenshot.png将捕获屏幕截图（请注意，它会在运行命令的文件夹中生成一个名为的文件）
• --window-size只允许捕获屏幕的一部分（格式为--window-size=width,height）
• --default-background-color=0是告诉 Chrome 使用透明背景而不是默认白色的魔术技巧
• 最后你提供 html 文件（作为本地或远程的 url...）

Answer 6

您可以使用PhantomJS，它是一个无头 webkit（safari 中的渲染引擎和（直到最近）chrome）驱动程序。您可以在此处了解如何对页面进行屏幕截图。希望有帮助！

Answer 7

我为 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);
            }
     });

Answer 8

您可以使用 HTML 转 PDF 工具，例如 wkhtmltopdf。然后你可以使用像 imagemagick 这样的 PDF 图像工具。诚然，这是服务器端和一个非常复杂的过程......

Answer 9

我阅读了 Sjeiti 的答案，我发现它非常有趣，您只需几行纯 JavaScript 行就可以在图像中呈现 HTML。

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

在这里，我将他的代码更进一步。

SVG 图像原则上具有无限分辨率，因为它是矢量图形。但是您可能已经注意到，Sjeiti 的代码生成的图像没有高分辨率。这可以通过在将 SVG 图像传输到画布元素之前对其进行缩放来解决，我在下面给出的两个（可运行）示例代码中的最后一个中完成了这一点。我在该代码中实现的另一件事是最后一步，即将其保存为 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 图像。

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>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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();" />&nbsp;&nbsp;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&nbsp;&nbsp;<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。

因此，我还将此代码段放在了适用于这些浏览器的https://jsfiddle.net/7gozdq5v/上。

Answer 10

使用此代码，它肯定会起作用：

<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

Answer 11

使用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/

Answer 12

仅使用 JavaScript 无法 100% 准确地做到这一点。

那里有一个 Qt Webkit工具和一个python 版本。如果你想自己做，我在 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];
}];

希望这可以帮助！

Answer 13

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

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

Answer 14

这就是我所做的。

注意：请检查 App.js 的代码。

链接到源代码

喜欢的话可以给个star哦✌️

更新：

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;

Answer 15

我也关注这个问题。我发现这是解决您问题的最佳方法

我们可以使用html-to-imagejavascript 库将 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>标签 where 中看到您的图像id = 'real'。您现在可以在代码中添加保存和下载或上传图像选项。

Answer 16

安装 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

Answer 17

HtmlToImage.jar 是将 html 转换为图像的最简单方法

使用java将HTML转换为图像

Answer 18

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

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