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

divの中に私のデータ（テンプレートを含む画像、テキスト、ラベルなど）を既に作成しました。これを画像フォーマットに変換したいのですが。 canvas.anybody plz help meを使用せずに、特定のdivコンテンツを画像に変換する技術はありますか？「mydiv」のコンテンツ全体をイメージに変換し、そのイメージをイメージディレクトリに保存したい場合は、保存をクリックしますか？divデータ全体を画像に変換し、キャンバスを使用せずにディレクトリに保存するにはどうすればよいですか？

<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>

出典

2013-08-31 luckyamit

私はできるブラウザプラグインが存在することになると確信していますこれはあなたのために行います。 – leftclickben

あなたはこれまで何をしていますか？これはちょうどhtmlです。 –

はい、私は "mydiv"のすべての内部データをSAVEボタンをクリックして画像フォーマットにしたいですか？解決策はありますか？ – luckyamit

UPDATE（2018年3月）：未来のこんにちは人！この回答はまだ多くのトラフィックを取得し、私は古いJSFiddle私が一緒に壊れていたので、それは更新されて気づいた。このテクニックを示す新しいJSFiddleはhttps://jsfiddle.net/Sq7hg/1913です。

-

これは、特にIEの古いバージョンで動作する必要がない限り、あなたはかかわらず、（<canvas>を使用できない場合は、私は「なぜあなたができるかわからないFlashベースのソリューションに見たいと思うかもしれませんt）。

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

<canvas>の制限事項と、既に試してみたいことについて、より詳細な情報を提供できますか？あなたがhttp://html2canvas.hertzen.comを使用して試すことができ、その場合には

// EDITあなた下記のコメントによると

が<canvas>を使用することができるかもしれない、 - それは基本的にあなたの指定された部分のDOMを再書き込みJavaScriptのソリューションですコードを<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呼び出しが必要になるか、または生成されたdata: URLを実際のイメージに変換したPHPスクリプトに送信してから、書き込む権限がある。それがここに入るのではなく、このスタックオーバーフローの質問から始めることをお勧めします：How to save an HTML5 Canvas as an image on a server?

出典

2013-08-31 06:16:23 Scottie

Scottieありがとうございますが、divの中に私のデータ（テンプレートを含む画像のテキストなど）を作成しました。これを画像形式に変換します。特定のdivのコンテンツを画像に変換する方法や、最初にキャンバスに変換してから画像に変換する方法はありますか？あなたのためにコードを持っているなら、ここに書きなさい？ – luckyamit

私の答えは、 '

ええとhttp://html2canvas.hertzen.com/に解決策がありますが、そこから明確なコードを得ることができません。私には分かりにくいので、そこからフィルターコードを入力してください。 – luckyamit

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

// 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>

here is a sample demo

出典

2013-09-02 06:02:59 luckyamit

それはすべてあなたのために働いてうれしい、うれしい！ – Scottie

いい仕事です！ありがとう！あなたは本当に私を助けます。 – r3mmel

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

答えて

関連する問題