web-dev-qa-db-ja.com

divの内容を画像として保存する方法は？

基本的に、divの内容を画像として保存しようとして、見出しの状態を実行しています。

IPad用の小さなオンラインアプリケーションを作成する予定です。

必須の機能の1つは、Webページ全体を画像として保存し、その画像をiPadのカメラロールに保存できる[保存]ボタンを持つことです。表示領域だけでなく、divの全内容を保存したい。

オンラインで簡単に検索しましたが、何もドキュメントが見つかりませんでした。 HTML5 Canvasでたくさん見つけました。ここに私がまとめたいくつかのコードがあります：

<script>
function saveimg()
{
    var c = document.getElementById('mycanvas');
    var t = c.getContext('2d');
    window.location.href = image;

    window.open('', document.getElementById('mycanvas').toDataURL());
}
</script>

<div id="mycanvas">
This is just a test<br />
12344<br />
</div>

<button onclick="saveimg()">Save</button>

しかし、私はこのエラーを受け取っています：

TypeError: c.getContext is not a function

このアプリケーションは、HTML、CSS、およびjQuery（またはその他のJavascriptライブラリ）でのみ構築されます。

javascriptjqueryhtml5screenshot
38
Fizzix

これと同じ質問がいくつかあります（ 1 、 2 ）。それを行う1つの方法は、キャンバスを使用することです。 これが実用的なソリューションです 。 ここ このライブラリの使用例がいくつかあります。

23
Glen Swift

このようなことをしてください：

<div>のIDを持つ#imageDIV、ID #downloadを持つ別のID、およびID <div>を持つ非表示の#previewImage。

Jqueryの最新バージョン、および jspdf CDN のjspdf.debug.jsを含めます

次に、このスクリプトを追加します。

var element = $("#imageDIV"); // global variable
var getCanvas; // global variable
$('document').ready(function(){
  html2canvas(element, {
    onrendered: function (canvas) {
      $("#previewImage").append(canvas);
      getCanvas = canvas;
    }
  });
});
$("#download").on('click', function () {
  var imgageData = getCanvas.toDataURL("image/png");
  // Now browser starts downloading it instead of just showing it
  var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
  $("#download").attr("download", "image.png").attr("href", newData);
});

#downloadをクリックすると、divはPNGとして保存されます

0
Imadeous