Tuval resmi sunucu tarafı kaydederken, bir base64 veri dizesinden, boş görüntü üretiyor

Question

PHP'de tuval resminin kaydedilmesiyle ilgili bir sorunum var. Boş bir .png dosya alıyorum. Bu sorun hakkında çok fazla araştırma yapıyorum ama bu konuda yararlı bir şey bulamıyorum. Gerçek görüntüyü oluşturmak yerine neden boş bir görüntü kaydediyor?

JavaScript kodu:

html2canvas([document.getElementById('dadycool')], { 
    onrendered: function (canvas) { 
     var data = canvas.toDataURL(); 
     var image = new Image(); 
     image.src = data; 
     document.getElementById('imagec').appendChild(image); 
     console.log(data); 
     $.ajax({ 
    type: "POST", 
    url: "up.php", 
    data: { 
    imgBase64: data 
    } 
}).done(function(o) { 
    console.log('saved'); 
}); 
} 

PHP kodu:

<?php 
// requires php5 
define('localhost/samp/sample2/uploads', 'images/'); 
$img = $_POST['imgBase64']; 
$img = str_replace('data:image/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = localhost/samp/sample2/uploads . uniqid() . '.png'; 
$success = file_put_contents($file, $data); 
print $success ? $file : 'Unable to save the file.'; 
?> 

Answer 1

PHP hata iletilerini görüntülemek için geliştirme kutunuzu yapılandırmamışsınızdan şüpheleniyorum. doğrudan kullanmak anlamına gelir Yani

define('localhost/samp/sample2/uploads', 'images/'); 

:

$file = localhost/samp/sample2/uploads . uniqid() . '.png'; 

... tetikleme edilmelidir:

Notice: Use of undefined constant localhost - assumed 'localhost' 
Notice: Use of undefined constant samp - assumed 'samp' 
Warning: Division by zero 
Notice: Use of undefined constant sample2 
Warning: Division by zero 
Notice: Use of undefined constant uploads - assumed 'uploads' 
Warning: Division by zero 

Geçerli bir tanımlayıcı olmayan bir sabit tanımlıyorsanız. .. ve file sadece temel dosya ismini içerecektir (örn. 53676a01cdb59.png), ancak yol bileşeni içermez. `Olarak bildiğim kadarıyla, toDataUrl png resim döndürür Varsayılan olarak

define('DIR_UPLOADS', 'images/'); 

Answer 2

Bu aynı sorunu başlamıştı - bu her zaman doğru gönderilen ediliyordu base64 verileri gibi görünüyordu ama görüntü sunucu tarafı oluşturulamadı . Bulduğum çözüm, 'FormData' nesnesini ve sunucuya göndermek için çok basit bir xhr isteğini kullanmaktı.

var url='/path/to/save.php'; 
var data=oCanvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''); 
var fd=new FormData(); 
fd.append('imgdata',data); 

var request = new XMLHttpRequest(); 
request.open('POST', url); 
request.send(fd); 

Sorunun yanlış Content-Type başlığı xhr isteği tarafından gönderilen neden oldu% 99 eminim. FormData ile birlikte bir temel xhr isteği kullanmak, doğru tanımlanmış içerik sınırları olan çok parçalı/formdata içerik türüyle gönderilecek xhr isteğini zorladı.