是否有一种方法将html渲染成PNG那样的图像?我知道这是可能的与画布,但我想渲染标准的html元素,如div为例。
当前回答
你可以添加引用HtmlRenderer到你的项目,并执行以下操作:
string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));
其他回答
HtmlToImage.jar是将html转换为图像的最简单方法
使用java将HTML转换为图像
你可以使用PhantomJS,这是一个无头webkit (safari和chrome(直到最近)的渲染引擎)驱动程序。您可以在这里学习如何对页面进行屏幕捕获。希望有帮助!
安装幻影
$ 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
请允许我推荐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);
});
我推荐这个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');
});