Kullanıcılar bir algoritma kaynaklanan görüntüleri kaydetmek için izin istiyorum nereye üretken bir sanat projesi üzerinde çalışıyorum. Genel fikir:

*HTML5 Tuval üzerinde bir görüntü üretken algoritma kullanarak oluşturun *görüntü tamamlandığında, kullanıcı sunucuya bir resim dosyası olarak tuval kaydetmek için izin *Kullanıcı ya da görüntü indirmek ya da algoritma kullanılarak üretilen parçaları bir galeri eklemek için izin ver.

Ancak, sıkıştım ikinci adım :( yeni başladım javascript programlamada son ay çok az deneyimi olan php/AJAX, ama düşündüm (belki) bu makul bir proje için öğrenmek onları.

Google ' dan sonra bunu buldum tam istediğim gibiydi*, 14*,:

Javscript kodu yol açtı:

function saveImage() {
    var canvasData = canvas.toDataURL("image/png");
    var ajax = new XMLHttpRequest();
    ajax.open("POST",'testSave.php',false);
    ajax.onreadystatechange = function() {
        console.log(ajax.responseText);
    }
    ajax.setRequestHeader('Content-Type', 'application/upload');
    ajax.send("imgData=" canvasData);

}

ve ilgili php (testSave.php):

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData=substr($imageData, strpos($imageData, ",") 1);
  $unencodedData=base64_decode($filteredData);
  $fp = fopen('/path/to/file.png', 'wb' );
  fwrite( $fp, $unencodedData);
  fclose( $fp );
}
?>

Ama bu hiç bir şey yapmak gelmiyor :(

Daha googling bu çıkıyor blog post:

Bir önceki öğretici dayanarak. Çok farklı değil, ama belki de denemeye değer:

$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri =  substr($data,strpos($data,",") 1);
file_put_contents($file, base64_decode($uri));
echo $file;

Bu tek bir dosya (yay!) oluşturur ama onun bozuk bir şey yer gibi görünmüyor. Ayrıca boş (0 boyut) görünüyor...

Yanlış bir şey yaptığımı gerçekten açık var mı? Benim dosya saklamak lazım. bu yolu yazılabilir değil, bu bir sorun değil yani... ama hiçbir şey oluyor gibi görünüyor ve gerçekten bu hata ayıklamak için nasıl emin değilim.

DÜZENLEME:

Salvidor aşağıdaki Dali bağlantı ajax isteği olarak değişti:

function saveImage() {
    var canvasData = canvas.toDataURL("image/png");
    var xmlHttpReq = false;       
    if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    }

    else if (window.ActiveXObject) {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
   ajax.open('POST', 'testSave.php', false);
   ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   ajax.onreadystatechange = function() {
        console.log(ajax.responseText);
    }
   ajax.send("imgData=" canvasData);
}

Ve şimdi görüntü dosyası oluşturulur ve boş değil! Eğer içerik türü için bir önemi varsa ve x-www-form-urlencoded olarak değiştirmeyi görüntü veri gönderilmesine izin gibi görünüyor.

Döner (oldukça büyük) konsol dize base64 kod ve veri dosyası ~140 kB. Ancak, hala açık ve görüntü olarak biçimlendirilmiş değil gibi görünüyor :(

Burada ihtiyacınız olanı elde etmek için nasıl bir örnek:

1)Bir şey çizin(canvas tutorial alınan)

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // begin custom shape
    context.beginPath();
    context.moveTo(170, 80);
    context.bezierCurveTo(130, 100, 130, 150, 230, 150);
    context.bezierCurveTo(250, 180, 320, 180, 340, 150);
    context.bezierCurveTo(420, 150, 420, 120, 390, 100);
    context.bezierCurveTo(430, 40, 370, 30, 340, 50);
    context.bezierCurveTo(320, 5, 250, 20, 250, 50);
    context.bezierCurveTo(200, 5, 150, 20, 170, 80);

    // complete custom shape
    context.closePath();
    context.lineWidth = 5;
    context.fillStyle = '#8ED6FF';
    context.fill();
    context.strokeStyle = 'blue';
    context.stroke();
</script>

2)URL biçimine tuval resim (base64) dönüştürmek

var dataURL = canvas.toDataURL();

3)Ajax ile sunucunuza gönderin

$.ajax({
  type: "POST",
  url: "script.php",
  data: { 
     imgBase64: dataURL
  }
}).done(function(o) {
  console.log('saved'); 
  // If you want the file to be visible in the browser 
  // - please modify the callback in javascript. All you
  // need is to return the url to the file, you just saved 
  // and than put the image in your browser.
});

3)Görüntü olarak sunucunuzdaki base64 kaydedin(Burada aynı fikirleri her dilde how to do this in PHP. PHP bir sunucu tarafı ** 18):