0

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

我已经查看了这些其他问题，但无法完全弄清楚：

HTML5 CANVAS：如何从服务器保存和重新打开图像

这对我来说真的不起作用。

将“画布”图像数据上传到服务器

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

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

从 Stackoverflow 之外，但我从这里到达那里。

版本 1

这一路不行，感觉接近了，处理sketch在工作，踢出一张图片，就是用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（关于在处理中使用它的一个问题的答案），但该文件中没有它。

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

4

2 回答 2

2

那里的代码太多了=）

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

我们应该很高兴。

于 2013-02-12T15:43:42.410 回答
1

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

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

于 2013-02-14T07:29:08.397 回答