web-dev-qa-db-ja.com

HTMLコンテンツから画像ファイルを保存/エクスポートしますか？

私は動的なHTMLコンテンツを作成していて、HTMLコンテンツをphp、jQuery、JavaScript [または可能であれば他のもの]を使用して画像ファイルにエクスポート/保存する必要があるというシナリオがあります。

javascriptjqueryhtmlimage
12
Bhavin Rana

結局私はコードphpを使用することにしました

GdおよびImage関数

http://php.net/manual/en/ref.image.php

これで、画像を使用して特定の位置に特定のhtml要素を作成しました。

貢献してくれてありがとう。

1
Bhavin Rana

Htmlをキャンバスに描画できます。 https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

キャンバスを画像としてサーバーに保存します。 http://motyar.blogspot.com/2010/04/save-html5-canvas-data-as-image.html

または、htmlをサーバーに送信してレンダリング server-side ：

https://github.com/visionmedia/screenshot-app または http://cutycapt.sourceforge.net/

5
Mario Michelli

HTML5キャンバスとtoDataURLメソッドを使用できます。例えば：

var capture = function() {
  var root = document.documentElement;
  var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'html:canvas');
  var context = canvas.getContext('2d');
  var selection = {
    top: 0,
    left: 0,
    width: root.scrollWidth,
    height: root.scrollHeight,
  };

  canvas.height = selection.height;
  canvas.width = selection.width;

  context.drawWindow(
    window,
    selection.left,
    selection.top,
    selection.width,
    selection.height,
    'rgb(255, 255, 255)'
  );

  return canvas.toDataURL('image/png', '');
};

上、左、幅、高さを調整して、Webページの一部のみをキャプチャできます。

結果はデー​​タURI文字列です。サーバーに送信するか、別のキャンバスに描画できます。

  var canvas = document.getElementById('captured');
  var ctx = canvas.getContext('2d');
  var image = new Image();
  image.src = capture();

  // the image is not immediately usable
  $(image).load(function() { // jquery way
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
  });

プラグインはおそらくこの方法を使用しています。また、ソースコードを確認することもできます。

編集：JQueryを使用してサーバーに送信するには、次のようにします。

$("#send-capture-button").click(function() {
  $.post("/url-to-send-image-to", {image_data: capture()})
});

サーバー側では、データURLをデコードする必要があります。

"MichaëlWitrant"の回答に基づいて、次を見てください Jqueryを使用してHTMLをPNGイメージとしてコンパイル/保存/エクスポート

3
Sypress

私はキャンバスを自分で置き、上にcreateElement行を使用していません。ユーザーからセキュリティ権限を取得するには、おそらくdrawWindow()の前にこの行を追加する必要があります。参照 http://murfy.de/read/webgl-drawWindow

netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

画像をPNGなどとして保存したい場合は、次の場所で便利なスクリプトを見つけました。 http://www.nihilogic.dk/labs/canvas2image/

2
Rez