AJAX, PHP and canvas URI

AJAX, PHP and canvas URI

本文关键字：canvas URI and PHP AJAX      更新时间：2023-09-26

我有一个带有保存按钮的画布绘制工具。当您单击保存按钮时，它会执行此代码。

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必须用于处理服务器端的东西。我浏览了一下网页，想出了这个。

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变量包含在我的占位符元素中？我需要开个会吗？有点迷失在这一点上。服务器端不是我的强项。提前感谢！

这是我将画布内容保存到Twitter、Facebook和Pinterest的代码。我在iPad上用了素描.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>

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

在画布上创建的图像将与postit的图像合并在一起，因此看起来就像是在上面绘制的…并保存在服务器上。

相关文章：