AJAX、PHP、キャンバスURI

Question

保存ボタン付きキャンバス描画ツールがあります。保存ボタンをクリックすると、このコードが実行されます。

function saveDrawing() { 
    var url = canvas.toDataURL(); 
    w = window.open('saveimage.php'); 
    w.onload = function(){ 
     var placeholder = w.document.getElementById("placeholder"); 
     placeholder.src = url; 
    }; 
} 

画像はプレースホルダ要素の新しいウィンドウに表示されます。このページからは、イメージを.png形式でダウンロードする2つのボタンと、フォームデータとともに電子メールでpngを送信するボタンを追加したいと思います。私は、PHPは、サーバー側のものを処理するために使用する必要があります理解しています。私はウェブを見て、これを思いついた。

saveimage.phpにおけるAJAX要求：

function saveViaAJAX(){ 
    var placeholder = document.getElementById("placeholder"); 
    var canvasData = placeholder.src; 
    var postData = "canvasData="+canvasData; 
    var ajax = new XMLHttpRequest(); 
    ajax.open("POST",'save.php',true); 
    ajax.setRequestHeader('Content-Type', 'canvas/upload'); 
    ajax.send(postData); 
} 

とsave.php：

は

<?php 
    if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) { 
     $imageData=$GLOBALS['HTTP_RAW_POST_DATA']; 
     $filteredData=substr($imageData, strpos($imageData, ",")+1); 
     $unencodedData=base64_decode($filteredData); 
     $fp = fopen('drawing.png', 'wb'); 
     fwrite($fp, $unencodedData); 
     fclose($fp); 
    } 
?> 

saveimage.phpで保存ボタンは次のようになります。

<button onclick="saveViaAJAX();" class="button"> 

ボタンをクリックすると何も得られません。これはこれに最も近いアプローチですか？または私はdataToURL（）から行く必要がありますか？まっすぐにデコードされ、格納されるphpになると私のプレースホルダーの要素にPHP変数を含める？私はそれを行うためにセッションが必要でしょうか？これは少し失われました。サーバー側は私の強みではありません。前もって感謝します！

Answer 1

これは、キャンバスのコンテンツをTwitter、Facebook、Pinterestに保存するためのコードです。私はiPadのtweeksを使ってsketch.jsを使いました。

HTML：

<a onClick="saveViaAJAX(this.id);" id="saveimg2Twitter">Twitter</a> 
    <a onClick="saveViaAJAX(this.id);" id="saveimg2Facebook">Facebook</a> 
    <a onClick="saveViaAJAX(this.id);" id="saveimg2Pinterest">Pinterest</a> 

アヤックス：

function saveViaAJAX(clicked_id) { 
    var testCanvas = document.getElementById("colors_sketch"); 
    var canvasData = testCanvas.toDataURL("image/png"); 
    var postData = "canvasData="+canvasData; 
    var myPopup = window.open ("pleasewait.html", '', ''); 
    var ajax = new XMLHttpRequest(); 
    ajax.open("POST",'php/CanvasSave.php',false); 
    ajax.setRequestHeader('Content-Type', 'canvas/upload'); 
    ajax.onreadystatechange=function() 
    { 
     if ((ajax.readyState == 4) && (clicked_id == 'saveimg2Twitter')) 
     { 
       myPopup.location = "http://twitter.com/share?text=Look%20at%20my%20doodle%20at%20Studiomik.nl&url=http://www.brandtontwerpbureau.nl/test/doodle.php?afb="+ajax.responseText; 
     } 
     else if ((ajax.readyState == 4) && (clicked_id == 'saveimg2Facebook')) 
     { 
       myPopup.location = "http://www.facebook.com/sharer.php?u=http://www.brandtontwerpbureau.nl/test/doodle.php?afb="+ajax.responseText; 
     } 
     else if ((ajax.readyState == 4) && (clicked_id == 'saveimg2Pinterest')) 
     { 
       myPopup.location ="//pinterest.com/pin/create/button/?url=http://www.brandtontwerpbureau.nl/test/doodle.php?afb="+ajax.responseText+"&media=http://www.brandtontwerpbureau.nl/test/php/"+ajax.responseText+"&description=Look%20at%20my%20doodle%20at%20Studiomik.nl"; 
     } 
    } 
    ajax.send(postData); 
} 

CanvasSave.php：

if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) { 
$imageData=$GLOBALS['HTTP_RAW_POST_DATA']; 
$filteredData=substr($imageData, strpos($imageData, ",")+1); 
$unencodedData=base64_decode($filteredData); 
$fp = uniqid(studiomik_).".png"; 
echo($fp); 
file_put_contents($fp, $unencodedData); 
$image = imagecreatefrompng("postit.png"); 
$overlay = imagecreatefrompng($fp); 
imagealphablending($image, true); 
imagesavealpha($image, true); 
imagealphablending($overlay, true); 
imagesavealpha($overlay, true); 
imagecopy($image, $overlay, 20, 20, 0, 0, 438, 438); 
imagedestroy($overlay); 
//Save the image to a file 
imagepng($image, $fp); 
} 

キャンバス上に作成した画像は、そう、付箋の画像と一緒にマージしますそれはそれに描かれているように見えます...そして、サーバーに保存されます。