0

処理スケッチをキャンバスにロードし、ユーザーがマウスオーバーしたときに（その部分を取得した）画像にいくつかのことが起こり、キャンバスを離れたときに画像をに保存するプロジェクトに取り組んでいます。サーバ。

私はこれらの他の質問を見ましたが、これを完全に理解することはできません：

HTML5 CANVAS：サーバーから画像を保存して再度開く方法

それは私にとって実際にはうまくいきません。

'canvas'画像データをサーバーにアップロードする

私はこれにすべてを置く場所を正確に理解していません。

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を処理することはできますが（処理での使用に関する1つの質問への回答があります）、このファイルにはBase64が含まれていません。

どんな考えでもありがたいです、ありがとう！

4

2 に答える 2

2

そこにコードが多すぎる=）

Canvasは、1回の関数呼び出しで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/

私が騙したことの1つは、おそらく新人のことですが、変数canvasDataを引用符で囲んでいたのですが、これはもちろん正しくありません（実際の単語「canvasData」ではなく文字列が必要だったため）。

誰かがそれが機能するのを見たい場合：http：//graphic-interaction.com/mfa-thesis/testing-group02/pro-ex-07.php

于 2013-02-14T07:29:08.397 に答える