呈现HTML到图像
有没有办法像PNG呈现HTML图像？ 我知道这是可能的canvas，但我想呈现标准的HTML元素，例如div。
是。 存在HTML2Canvas以将HTML呈现到<canvas> （您可以将其用作图像）。
注意：有一个已知的问题，这不适用于SVG
我可以推荐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); });
你可以使用PhantomJS ，这是一个无头的webkit（safari和（直到最近）chrome）驱动的渲染引擎。 你可以学习如何在这里做页面的屏幕截图。 希望有所帮助！
您可以使用HTML到PDF工具，如wkhtmltopdf。 然后，你可以使用PDF格式的图像工具，如imagemagick。 无可否认，这是服务器端和一个非常复杂的过程…
我为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); } });
我不认为这是最好的答案，但似乎足够有趣的发布。
编写一个应用程序，打开你喜欢的浏览器到所需的HTML文件，正确的窗口大小，并采取屏幕截图。 然后，删除图像的边界。
你无法单独使用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]; }];
希望这可以帮助！
有很多select，他们都有自己的利弊。
选项1：使用许多可用的库之一
- DOM至图像
- wkhtmltoimage （包含在wkhtmltopdf工具中）
- IMGKit （ruby和基于wkhtmltoimage）
- imgkit （用于python和基于wkhtmltoimage）
- python，webkit2png
- …
优点
- 大部分时间会话都很快
缺点
- 糟糕的渲染
- 不执行JavaScript
- 不支持最近的Webfunction（FlexBox，高级select器，Webfonts，框大小，媒体查询…）
- 有时不太容易安装
- 复杂的规模
选项2：使用PhantomJs，也许包装库
- PhantomJs
- node-webshot （PhantomJs的JavaScript包装库）
- …
优点
- 执行Javascript
- 蛮快
缺点
- 糟糕的渲染
- 不支持最近的Webfunction（FlexBox，高级select器，Webfonts，框大小，媒体查询…）
- 复杂的规模
- 如果有图像需要加载，就不那么容易
选项3：使用Chrome Headless，也许是一个包装库
- Chrome Headless
- 铬devtools协议
- Puppeteer （Chrome无头文件的javascript包装库）
- …
优点
- 执行Javascript
- 近乎完美的渲染
缺点
- 不太容易得到通缉的结果：
- 页面加载时间
- 视口尺寸
- 复杂的规模
- 如果html包含外部链接，相当慢甚至更慢
选项4：使用API
- ApiLeap （基于chrome）
- EvoPDF （有html的选项）
- Grabzit
- …
优点
- 执行Javascript
- 近乎完美的渲染
- 快速caching选项正确使用
- 比例是由API处理的
- 精确计时，视口，…
- 大多数时候他们提供一个免费的计划
缺点
- 如果您打算使用它们，则不是免费的
免责声明：我是ApiLeap的创始人。 我尽我所能提供了一个诚实和有用的答案。
安装phantomjs
$ npm install phantomjs
用下面的代码创build一个文件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(); });
将文件作为parameter passing给phantomjs
$ phantomjs github.js
将DOM对象绘制到canvas中可以快速实现。
从性能的angular度来看，这个方法应该很轻。 因为svg渲染器和dom渲染器显然可以根据需要来回传递缓冲区。 这是有道理的，因为这都是核心代码。
我没有这方面的基准，但是MDN文件维护得很好，不仅仅是壁虎。 所以我猜你至less可以知道，糟糕的performance是一个问题，将在某些时候解决。
您可以添加引用 HtmlRenderer到您的项目，并执行以下操作，
string htmlCode ="<p>This is a sample html.</p>"; Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));
你当然可以。 GrabzIt的JavaScript API允许你从这样的网页捕捉一个div：
<script type="text/javascript" src="grabzit.min.js"></script> <script type="text/javascript"> GrabzIt("Your Application Key").ConvertURL("http://www.example.com/my-page.html", {"target": "#features", "bheight": -1, "height": -1, "width": -1}).Create(); </script>
其中#features是要捕获的div的ID。 如果你想将HTML转换成图像。 你可以使用这种技术：
GrabzIt("Your Application Key").ConvertHTML( "<html><body><h1>Hello World!</h1></body></html>").Create();
免责声明我build立了这个API！
