Question

我正在进行一个项目，我想在一个画布中加载一个处理草图，当用户将鼠标移到（得到那个部分）时，图像会发生一些事情，然后当他们离开画布时保存图像返回服务器。

我已经查看了其他这些问题，并且无法解决这个问题：

HTML5 CANVAS: How to save and reopen image from server

那对我不起作用。

Uploading 'canvas' image data to the server

我并不完全明白把所有东西放在这里。

http://j-query.blogspot.in/2011/02/save-base64-encoded-canvas-image-to-png.html

从Stackoverflow外部，但我从那里到达那里。

版本1

这不是一直都在工作，我觉得我很接近，处理草图正在工作，而且它正在拍摄一张图片，我只是无法抓住它使用JS，然后我不知道如何处理它以将其恢复到服务器。

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Processing Page</title>
    <script type="text/javascript" src="../../processingjs/processing.js"></script>
    <script type="text/javascript"> //This is for communicating between Processing and Javascript
       function showXYCoordinates(x, y) {
         document.getElementById('xcoord').value = x;
         document.getElementById('ycoord').value = y;
       }

       var bound = false;

       function bindJavascript(instance) {
         var pjs = Processing.getInstanceById(instance);
         if(pjs != null) {
           pjs.bindJavascript(this);
           bound = true; 
           }
         if(!bound) {
              setTimeout(bindJavascript, 250);
         }
       }

       bindJavascript('B_103');

       var processingOutput = Processing.getInstanceByID('B_103');
       var img = processingOutput.mouseOut();
    </script>
</head>
    <body>
    <canvas id="B_103" data-processing-sources="B_103/B_103.pde" width="300px" height="300px"></canvas>

<?php
    // requires php5
    echo $_GET['img'];
    define('UPLOAD_DIR', 'B_103/data/');
    $img = $_POST['img'];
    // $img = str_replace('data:image/png;base64,', '', $img);
    // $img = str_replace(' ', '+', $img);
    // $data = base64_decode($img);
    $file = UPLOAD_DIR . 'image.jpg';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Not able to save the file.';
?></body>
</html>

然后有这个：

第2版

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Processing Page</title>
    <script type="text/javascript" src="../../processingjs/processing.js"></script>
    <script type="text/javascript"> //This is for communicating between Processing and Javascript
       function showXYCoordinates(x, y) {
         document.getElementById('xcoord').value = x;
         document.getElementById('ycoord').value = y;
       }

       var bound = false;

       function bindJavascript(instance) {
         var pjs = Processing.getInstanceById(instance);
         if(pjs != null) {
           pjs.bindJavascript(this);
           bound = true; 
           }
         if(!bound) {
              setTimeout(bindJavascript, 250);
         }
       }

       bindJavascript('B_103');

       //var processingOutput = Processing.getInstanceByID('B_103');
       //var img = processingOutput.mouseOut();

        function save(){      //saves the canvas into a string as a base64 png image.   jsvalue is sent to the server by an html form
          var b_canvas = document.getElementById("B_103");
          var b_context = b_canvas.getContext("2d");
          var img = b_canvas.file_put_contents('backpicture.png',base64_decode(substr($str,22))); 
        }
    </script>
</head>
    <body>
    <canvas id="B_103" data-processing-sources="B_103/B_103.pde" width="300px" height="300px"></canvas>

<?php
  echo $_GET['img'];
  $str=$_POST['img'];
  $file=fopen("B_103/data/image.txt","w");
  if(isset($_POST['submit']))
      fwrite($file,$str);
  fclose($file) 
 ?>



</body>
</html>

所以这个向后保存文件，但文件中没有任何内容。我可以处理Base64（关于在处理中使用它的一个问题的答案）但是这个文件没有在那里。

任何想法都表示赞赏，谢谢！

Answer 1

那里的代码太多=）

Canvas可以通过单个函数调用为您提供base64编码的图像，因此只需使用canvas.toDataURL（“image / png”）或canvas.toDataURL（“image / jpg”）来获取该字符串，然后保存它使用正常的POST操作到您的服务器。

如果再次需要，请使用GET请求采用的任何格式向服务器询问数据，然后将其解压缩为图像，然后将该图像绘制到草图上：

var dataURI = /* get the string from your server */
var img = new Image();
img.src = dataURI;
sketch.image(img,0,0);

我们应该好好去。

Answer 2

谢谢迈克，它正在发挥作用。这就是我所做的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Processing Page</title>
<script type="text/javascript" src="../../processingjs/processing.js"></script>
<script type="text/javascript"> //This is for communicating between Processing and Javascript
   function showXYCoordinates(x, y) {
     document.getElementById('xcoord').value = x;
     document.getElementById('ycoord').value = y;
   }

   var bound = false;

   function bindJavascript(instance) {
     var pjs = Processing.getInstanceById(instance);
     if(pjs != null) {
       pjs.bindJavascript(this);
       bound = true; 
       }
     if(!bound) {
          setTimeout(bindJavascript, 250);
     }
   }

   bindJavascript('B104');

   //var processingOutput = Processing.getInstanceByID('B_104');
   //var img = processingOutput.mouseOut();

    function postAjax(){
        var canvasB104 = document.getElementById('B104');
        var canvasData = canvasB104.toDataURL('image/png');
        var ajax = new XMLHttpRequest();
        ajax.open("POST",'testSave.php',false);
        ajax.setRequestHeader('Content-Type', 'application/upload');
        ajax.send(canvasData);      
    }
</script>
</head>
<body>
<canvas id="B104" data-processing-sources="B_104/B_104.pde" width="300px" height="300px" onmouseout="postAjax()"></canvas>

另外，我有一个PHP文件，我从本教程获得：http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/

我搞砸的事情之一，这可能是一个新手要做的事情，我在引号中有变量canvasData，我现在看到它是不正确的（因为我希望字符串不是实际的单词'canvasData' ）

如果有人想看到它有效：http://graphic-interaction.com/mfa-thesis/testing-group02/pro-ex-07.php

将图像从Processing传递到Javascript，然后使用AJAX / PHP将所述图像保存回服务器？

版本1

第2版

2 个答案: