web-dev-qa-db-ja.com

divデータ全体を画像に変換し、キャンバスを使用せずにディレクトリに保存するにはどうすればよいですか？

既にdiv内にデータ（テンプレートを含む画像、テキスト、ラベルなど）を作成しました。今では、それを画像形式に変換したいと思っています。 canvas.anybody plzを使用せずに特定のdivコンテンツを画像に変換する方法はありますか？ 「保存」をクリックすると、「mydiv」コンテンツ全体を画像に変換し、その画像を画像ディレクトリに保存したいですか？

<html>
  <header>
  </header>
  <body>
    <label> Template Design</label>
    <div id="mydiv">
      <label> Good Morning</label>
      <img src="mug.png" id="img1" height="100" width="100"  />
    </div>
    <input name="save" type="button" value="SAVE" />
  </body>
</html>
phpjavascriptjqueryhtmlcss
22
luckyamit

UPDATE（2018年3月）：Hello people of the future！この答えにはまだ多くのトラフィックがありますが、私がまとめた古いJSFiddleが壊れていて更新されていることに気付きました。この手法を示す新しいJSFiddleは次のとおりです。 https://jsfiddle.net/Sq7hg/191 。

-

_<canvas>_を使用できない場合は、Flashベースのソリューションを検討することをお勧めします（ただし、これが古いバージョンのIEで動作する必要がない限り、できません）。

http://flashcanvas.net/ は、フラッシュを使用する_<canvas>_のエミュレーションであり、必要な場所に移動する可能性があります。ドキュメントでは、toDataURL()をサポートしているので、うまくいくかもしれないと書かれています。

_<canvas>_をめぐる制限とは何か、また、あなたがすでに試みたものについて、より多くの洞察を提供できますか？

//編集

以下のコメントによると、_<canvas>_を使用できる場合があります。その場合、 http://html2canvas.hertzen.com を使用してみてください。これは基本的に書き換えるJavaScriptソリューションですコードの指定された部分のDOMを_<canvas>_に変換し、toDataURL()を介して画像データに変換するなど、必要に応じてやり取りできるようにします。

以前は使用していませんが、JavaScriptコードは次のようになります。

_html2canvas([document.getElementById('mydiv')], {
    onrendered: function(canvas) {
       var data = canvas.toDataURL('image/png');
       // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
    }
});
_

私はここで実際にこれの簡単なjsfiddleをノックしました： https://jsfiddle.net/Sq7hg/1913/（注：上記のリンクを更新しました）

このjsfiddleは、toDataURL()メソッドを使用して、キャンバスを画像に変換し、ドキュメントに追加する方法を示します。生成された画像をサーバーに保存することは、AJAX呼び出しなどを必要とするため、画像データをPHP生成された_data:_ URLを実際の画像に変換し、書き込み許可のあるディレクトリに保存します。それが必要な場合は、ここに行くのではなく、このスタックから始めることをお勧めしますオーバーフローの質問： HTML5 Canvasを画像としてサーバーに保存する方法？

26
Scottie

これは完全に機能します...最も簡単な解決策でなければなりません。

// html

<div id="mydiv" style="background-image:url(Koala.jpg) ;background-size: 100%;
background-size :200px 200px;
background-repeat: no-repeat;">
<p>text!</p>
<img src="mug.png" height="100" width="100"/></div>
<div id="canvas">
<p>Canvas:</p>
</div>

 <div style="width:200px; float:left" id="image">
 <p style="float:left">Image: </p>
 </div>
 <div style="float:left;margin-top: 120px;" class="return-data">
 </div>
 <script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

//スタイル

#mydiv {
background-color: lightblue;
width: 200px;
height: 200px
}

//スクリプト

  <script language="javascript">
    html2canvas([document.getElementById('mydiv')], {
    onrendered: function (canvas) {
    document.getElementById('canvas').appendChild(canvas);
    var data = canvas.toDataURL('image/png');
     //display 64bit imag
     var image = new Image();
    image.src = data;
    document.getElementById('image').appendChild(image);
    // AJAX call to send `data` to a PHP file that creates an PNG image from the dataURI string and saves it to a directory on the server

    var file= dataURLtoBlob(data);

// Create new form data
var fd = new FormData();
fd.append("imageNameHere", file);

$.ajax({
   url: "uploadFile.php",
   type: "POST",
   data: fd,
   processData: false,
   contentType: false,
}).done(function(respond){

    $(".return-data").html("Uploaded Canvas image link: <a href="+respond+">"+respond+"</a>").hide().fadeIn("fast");
    });

  }
});

function dataURLtoBlob(dataURL) {
// Decode the dataURL    
var binary = atob(dataURL.split(',')[1]);
// Create 8-bit unsigned array
var array = [];
for(var i = 0; i < binary.length; i++) {
    array.Push(binary.charCodeAt(i));
 }
// Return our Blob object
return new Blob([new Uint8Array(array)], {type: 'image/png'});
 }

</script>

ここにサンプルデモがあります

15
luckyamit