既に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>
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を画像としてサーバーに保存する方法?
これは完全に機能します...最も簡単な解決策でなければなりません。
// 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>