Passing image from Processing to Javascript and then saving said image back to server using AJAX / PHP?

问题

I'm working on a project where I want to load a processing sketch into a canvas, have some things happen to the image when a user mouses over (got that part), and then when they leave the canvas save the image back to the server.

I've looked at these other questions, and can't quite figure this out:

HTML5 CANVAS: How to save and reopen image from server

That's not really working for me.

Uploading 'canvas' image data to the server

I don't exactly understand where to put everything in this.

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

From outside of Stackoverflow, but I got there from here.

Version 1

This isn't working all the way, I feel like I'm close, the processing sketch is working, and it's kicking out an image, I just can't grab it with JS, and then I don't know what to do with it to get it back to the server.

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

And then there is this:

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

So this one is saving a file backwards, but the file has nothing in it. I can deal with Base64 (with the answer to one question about using it in processing) but this file doesn't have it in there.

Any thoughts appreciated, thank you!

回答1:

Way too much code there =)

Canvas can give you a base64 encoded image with a single function call, so just use canvas.toDataURL("image/png") or canvas.toDataURL("image/jpg") to get that string, and then save it to your server with a normal POST operation.

When it's required again, ask your server for the data using whatever format your GET request takes, and then unpack it as an Image, then draw that image onto your sketch:

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

And we should be good to go.

回答2:

Thanks Mike, it's working. Here's what I did.

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

Plus, I have a PHP file, that I got from this tutorial: http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/

One of the things I goofed up, which is probably a rookie thing to do, was I had the variable canvasData in quotes, which I see now is incorrect of course (because I wanted the string not the actual word 'canvasData')

In case anyone wants to see it working: http://graphic-interaction.com/mfa-thesis/testing-group02/pro-ex-07.php

来源：https://stackoverflow.com/questions/14805198/passing-image-from-processing-to-javascript-and-then-saving-said-image-back-to-s

标签

processing.js