処理スケッチをキャンバスにロードし、ユーザーがマウスオーバーしたときに（その部分を取得した）画像にいくつかのことが起こり、キャンバスを離れたときに画像をに保存するプロジェクトに取り組んでいます。サーバ。
私はこれらの他の質問を見ましたが、これを完全に理解することはできません：
HTML5 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が含まれていません。
どんな考えでもありがたいです、ありがとう！