是否有一种方法将html渲染成PNG那样的图像?我知道这是可能的与画布,但我想渲染标准的html元素,如div为例。
当前回答
有很多选择,它们都有各自的优点和缺点。
选项1:使用API
ApiFlash(基于chrome) EvoPDF(有html选项) Grabzit HTML/CSS图像API ...
Pros
执行Javascript 近乎完美渲染 正确使用缓存选项时快速 缩放由api处理 精确计时,视口,… 大多数时候,他们提供的是免费方案
Cons
如果你打算经常使用它们,就不是免费的
选项2:使用众多可用库中的一个
dom-to-image Wkhtmltoimage(包含在wkhtmltopdf工具中) IMGKit(用于ruby和基于wkhtmltoimage) Imgkit(适用于python,基于wkhtmltoimage) python-webkit2png ...
Pros
大多数时候,转换是相当快的
Cons
坏的呈现 不执行javascript 不支持最近的网页功能(FlexBox,高级选择器,网页字体,盒子大小,媒体查询,…) 有时不容易安装 缩放复杂
选项3:使用PhantomJs和包装器库
PhantomJs node-webshot(用于PhantomJs的javascript包装库) ...
Pros
执行Javascript 很快
Cons
坏的呈现 不支持最近的网页功能(FlexBox,高级选择器,网页字体,盒子大小,媒体查询,…) 缩放复杂 不那么容易使它工作,如果有图像要加载…
选项4:使用Chrome Headless和一个包装器库
Chrome无头 chrome-devtools-protocol Puppeteer (Chrome无头浏览器的javascript包装库) ...
Pros
执行Javascript 近乎完美渲染
Cons
要得到想要的结果并不容易: 页面加载时间 视窗尺寸 缩放复杂 相当慢,甚至更慢,如果html包含外部链接
披露:我是ApiFlash的创始人。我尽力提供了一个诚实而有用的答案。
其他回答
是的。HTML2Canvas的存在是为了将HTML渲染到<canvas>上(你可以将其用作图像)。
注意:有一个已知的问题,这将不适用于SVG
使用剧作家的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()
是的,你可以用HTML2Canvas库它渲染你的HTML代码到画布。 它提供了将html从特定div转换为图像的选项,然后使用canvas2image将图像本地下载到您的文件系统中。
链接源代码
html2canvas(document.querySelector('#screenscoot'), {
onrendered: function(canvas) {
// document.body.appendChild(canvas);
return Canvas2Image.saveAsPNG(canvas);
}
});
你可以使用像wkhtmltopdf这样的HTML转PDF工具。然后你可以使用像imagemagick这样的PDF图像工具。不可否认,这是服务器端,一个非常复杂的过程…
我推荐这个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');
});