blocks|key|348511|text|是。HTML存在的目的是将HTML2Canvas呈现到<canvas>上(然后您可以将其用作图像)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|348512|注意:有一个已知的问题，即这将不适用于SVG|348513|entityMap|0|LINK|mutability|MUTABLE|url|http://html2canvas.hertzen.com/^0|R|8|D|B|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

Yes. <a href="http://html2canvas.hertzen.com/" rel="noreferrer">HTML2Canvas</a> exists to render HTML onto <code>&lt;canvas&gt;</code> (which you can then use as an image).

NOTE: There is a known issue, that this will not work with SVG

blocks|key|348660|text|我可以推荐dom-to-image库，它是专门为解决这个问题而编写的(我是维护者)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|348661|下面是你如何使用它(更多的here)：|348662|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);
++++});|code-block|syntax|javascript|348663|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/tsayen/dom-to-image|1|https://github.com/tsayen/dom-to-image#usage^0|5|C|0|0|D|4|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

May I recommend <a href="https://github.com/tsayen/dom-to-image">dom-to-image</a> library, that was written solely to address this problem (I'm the maintainer). 
Here is how you use it (some more <a href="https://github.com/tsayen/dom-to-image#usage">here</a>):

<pre><code>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);
 });
</code></pre>

blocks|key|348626|text|你可以使用PhantomJS，这是一个无头webkit+(+safari中的渲染引擎和(直到最近)+chrome)驱动程序。您可以学习如何进行pages+here的屏幕截图。希望这能有所帮助！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|348627|entityMap|0|LINK|mutability|MUTABLE|url|http://phantomjs.org/|1|http://phantomjs.org/screen-capture.html^0|5|9|0|25|4|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

You could use <a href="http://phantomjs.org" rel="noreferrer">PhantomJS</a>, which is a headless webkit (the rendering engine in safari and (up until recently) chrome) driver. You can learn how to do screen capture of pages <a href="http://phantomjs.org/screen-capture.html" rel="noreferrer">here</a>. Hope that helps!

blocks|key|348389|text|您可以使用HTML转PDF工具，如wkhtmltopdf。然后你可以使用PDF格式的图像工具，比如imagemagick。诚然，这是一个非常复杂的服务器端过程……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|348390|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can use an HTML to PDF tool like wkhtmltopdf. And then you can use a PDF to image tool like imagemagick. Admittedly this is server side and a very convoluted process...

blocks|key|564457|text|我不认为这是最好的答案，但它似乎足够有趣，可以发布。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|564458|编写一个应用程序，打开您喜欢的浏览器访问所需的HTML文档，适当调整窗口大小，并截取屏幕截图。然后，删除图像的边框。|564459|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I don't expect this to be the best answer, but it seemed interesting enough to post.

Write an app that opens up your favorite browser to the desired HTML document, sizes the window properly, and takes a screen shot. Then, remove the borders of the image.

blocks|key|564656|text|仅使用JavaScript不能100%25准确地完成这项工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|564657|那里有一个Qt+Webkit+tool+out和一个python+version。如果你想自己做，我已经在Cocoa上取得了成功：|offset|length|564658|[self+startTraverse:pagesArray+performBlock:%5E(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+%2B+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:@"/%25@-collection-%2503d-page-%2503d_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:@"/%25@-collection-%2503d-page-%2503d_large.png",+locale,+collectionIndex,+pageIndex]];
++++NSData+*dataLarge+=+[largeThumbOutput+representationUsingType:NSPNGFileType+properties:+nil];
++++[dataLarge+writeToFile:writePathLarge+atomically:+NO];
}];|code-block|syntax|javascript|564659|希望这能有所帮助！|564660|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/cutewebshot/|1|https://github.com/AdamN/python-webkit2png^0|0|F|8|0|Q|E|1|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]|$D|11|E|12|1|13]]|A|$]]|$1|F|3|G|5|H|7|14|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

You can't do this 100% accurately with JavaScript alone.

There's a Qt Webkit <a href="http://code.google.com/p/cutewebshot/" rel="nofollow">tool out</a> there, and a <a href="https://github.com/AdamN/python-webkit2png" rel="nofollow">python version</a>. If you want to do it yourself, I've had success with Cocoa:

<pre><code>[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];
}];
</code></pre>

Hope this helps!

blocks|key|564843|text|使用下面的代码，它肯定会起作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|564844|​|564845|<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>|code-block|syntax|javascript|564846|564847|但不要忘记在你的程序中包含Html2CanvasJS文件。https://html2canvas.hertzen.com/dist/html2canvas.js|offset|length|564848|entityMap|0|LINK|mutability|MUTABLE|url|https://html2canvas.hertzen.com/dist/html2canvas.js^0|0|0|0|0|T|1F|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@$L|10|M|11|1|12]]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

Use this code, it will surely work:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
 $(document).ready(function () {
	 setTimeout(function(){
		 downloadImage();
	 },1000)
 });
 
 function downloadImage(){
	 html2canvas(document.querySelector("#dvContainer")).then(canvas =&gt; {
		a = document.createElement('a'); 
		document.body.appendChild(a); 
		a.download = "test.png"; 
		a.href = canvas.toDataURL();
		a.click();
	});	 
 }
&lt;/script&gt;</code></pre>
</div>
</div>


Just do not forget to include Html2CanvasJS file in your program.
<a href="https://html2canvas.hertzen.com/dist/html2canvas.js" rel="noreferrer">https://html2canvas.hertzen.com/dist/html2canvas.js</a>

blocks|key|348723|text|安装phantomjs|type|unstyled|depth|inlineStyleRanges|entityRanges|data|348724|$+npm+install+phantomjs|code-block|syntax|javascript|348725|使用以下代码创建文件github.js|348726|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();
});|348727|将文件作为参数传递给phantomjs|348728|$+phantomjs+github.js|348729|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Install phantomjs

<pre><code>$ npm install phantomjs
</code></pre>

Create a file github.js with following code

<pre><code>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();
});
</code></pre>

Pass the file as argument to phantomjs

<pre><code>$ phantomjs github.js
</code></pre>

blocks|key|348821|text|HtmlToImage.jar将是将html转换为图像的最简单的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|348822|Converting+HTML+to+image+using+java|offset|length|348823|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/36933054/converting-html-to-image-using-java^0|0|0|Z|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

HtmlToImage.jar will be the simplest way to convert a html into an image 

<a href="https://stackoverflow.com/questions/36933054/converting-html-to-image-using-java">Converting HTML to image using java</a>

Is there a way to render html to image like PNG? I know that it is possible with canvas but I would like to render standard html element like div for example.

Render HTML to an image

有没有办法把html渲染成像PNG那样的图像？我知道使用canvas是可能的，但是我想渲染标准的html元素，比如div。

问将HTML呈现为图像
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将HTML呈现为图像EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将HTML呈现为图像
EN