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, а другую для отправки png по электронной почте вместе с некоторыми данными формы.Я понимаю, что php должен использоваться для обработки вещей на стороне сервера.Я посмотрел в Интернете и нашел это.

AJAX-запрос в saveimage.php:

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. Я использовал sketch.js с некоторыми твиками для iPad.

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>

Ajax:

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);
}

Изображение, созданное на холсте, объединится с изображением постита, поэтому оно выглядит так, как будто оно нарисовано на нем ... и сохранено на сервере.