HTMLをPNGのような画像にレンダリングする方法はありますか？canvasでそれが可能であることは知っていますが、たとえばdivのような標準のhtml要素をレンダリングしたいと思います。

これはかなり古い質問であることは知っていますが、すでに多くの答えがありますが、それでも私が実際にやりたいことを実行するために何時間も費やしました。

• 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を開かずに実行し、コマンドの完了後に終了します
• --screenshotスクリーンショットをキャプチャします（screenshot.pngコマンドが実行されるフォルダに呼び出されるファイルを生成することに注意してください）
• --window-size画面の一部のみをキャプチャすることを許可する（形式は--window-size=width,height）
• --default-background-color=0デフォルトの白い色ではなく、透明な背景を使用するようにChromeに指示する手品です
• 最後に、htmlファイルを提供します（ローカルまたはリモートのURLとして...）

はい。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);
    });

多くのオプションがあり、それらはすべて長所と短所があります。

オプション1：多くの利用可能なライブラリの1つを使用する

• dom-to-image
• wkhtmltoimage（wkhtmltopdfツールに含まれています）
• IMGKit（ルビー用、wkhtmltoimageベース）
• imgkit（python用、wkhtmltoimageに基づく）
• python-webkit2png
• ...

長所

• ほとんどの場合、変換はかなり高速です

短所

• 悪いレンダリング
• JavaScriptを実行しません
• 最近のWeb機能（FlexBox、Advanced Selectors、Webfonts、Box Sizing、Media Queriesなど）はサポートされていません
• インストールが簡単でない場合があります
• スケールが複雑

オプション2：PhantomJsとラッパーライブラリを使用する

• PhantomJs
• node-webshot（PhantomJsの JavaScriptラッパーライブラリ）
• ...

長所

• Javascriptを実行する
• かなり速いです

短所

• 悪いレンダリング
• 最近のWeb機能（FlexBox、Advanced Selectors、Webfonts、Box Sizing、Media Queriesなど）はサポートされていません
• スケールが複雑
• ロードする画像がある場合、動作させるのはそれほど簡単ではありません...

オプション3：Chromeヘッドレスとラッパーライブラリを使用する

• クロムヘッドレス
• chrome-devtools-protocol
• Puppeteer（ヘッドレスChromeのJavaScriptラッパーライブラリ）
• ...

長所

• Javascriptを実行する
• ほぼ完璧なレンダリング

短所

• 次の点に関して希望どおりの結果を得るのは簡単ではありません。
  • ページ読み込みタイミング
  • ビューポートの寸法
• スケールが複雑
• htmlに外部リンクが含まれている場合、かなり遅く、さらに遅くなる

オプション4：APIを使用する

• ApiFlash（Chromeベース）
• EvoPDF（htmlのオプションがあります）
• グラビット
• HTML / CSS to Image API
• ...

長所

• Javascriptを実行する
• ほぼ完璧なレンダリング
• キャッシュオプションを正しく使用すると高速
• スケールはAPIによって処理されます
• 正確なタイミング、ビューポート、...
• ほとんどの場合、彼らは無料プランを提供しています

短所

• たくさん使うつもりなら無料ではない

開示：私はApiFlashの創設者です。私は正直で有用な答えを提供するために最善を尽くしました。

ここでのすべての回答はサードパーティのライブラリを使用していますが、HTMLを画像にレンダリングすることは、純粋なJavaScriptでは比較的簡単です。そこれさえしたことについての記事 MDNのキャンバスセクションに。

トリックはこれです：

• XHTMLを含むforeignObjectノードでSVGを作成する
• 画像のソースをその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である必要があります
• セキュリティ上の理由から、画像のデータURLとしてのSVGは、外部ソースをロードできないため、HTMLの分離されたCSSスコープとして機能します。したがって、たとえばGoogleフォントは、このようなツールを使用してインライン化する必要があります。
• SVG内のHTMLが画像のサイズを超える場合でも、キャンバスに正しく描画されます。しかし、その画像から実際の高さを測定することはできません。高さが固定のソリューションは問題なく機能しますが、動的な高さはもう少し作業が必要になります。最善の方法は、SVGデータをiframeにレンダリングし（分離されたCSSスコープの場合）、結果のサイズをキャンバスに使用することです。

ヘッドレスWebキット（サファリのレンダリングエンジンと（最近まで）クロム）ドライバーであるPhantomJSを使用できます。ページの画面キャプチャーの方法については、こちらをご覧ください。お役に立てば幸いです。

wkhtmltopdfのようなHTMLからPDFへのツールを使用できます。そして、あなたはPDFをimagemagickのような画像ツールに使うことができます。確かにこれはサーバー側であり、非常に複雑なプロセスです...

Chrome、Firefox、MS Edgeで使用できる唯一のライブラリはrasterizeHTMLでした。HTML2Canvasよりも優れた品質を出力し、HTML2Canvasとは異なりサポートされています。

Elementの取得と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);
            }
     });

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/

これが最良の答えであるとは思いませんが、投稿するには面白そうだったようです。

お気に入りのブラウザーで目的のHTMLドキュメントを開き、ウィンドウのサイズを適切に設定し、スクリーンショットを撮るアプリを作成します。次に、画像の境界を削除します。

このコードを使用すると、確実に機能します。

<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

JavaScriptだけでこれを100％正確に行うことはできません。

Qt Webkit ツールとPythonバージョンがあります。あなたがそれを自分でやりたいのなら、私はココアで成功しました：

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

お役に立てれば！

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

HtmlToImage.jarは、htmlを画像に変換する最も簡単な方法です。

Javaを使用してHTMLを画像に変換する

あなたはできる参照の追加 HtmlRendererをプロジェクトに、次の操作を行い、

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