Canvas.toDataURL()

Question

Kullanarak bir görüntünün kodunu çözme ve kaydetme Bir kullanıcı, bir düzen oluşturmak için bir div üzerine sürükleyip bırakma işlemini içeren bir proje üzerinde çalışıyorum. Kullanıcı bittiğinde, div'u alan ve html2canvas'ı kullanarak bir tuval öğesi oluşturan bir düğme vardır, ardından görüntü olarak yeni bir pencerede açılır. Bu iyi, ama bir yere kaydetmek için ihtiyacım var, böylece bir e-postaya eklenebilir ve gönderilebilir. Şimdiye kadar sahip olduğum tek şey, gerçekten hiçbir şey yapamayacağım base64 kodlu dizedir. js tarafında

, ben:

#canvas div kimliğidir

html2canvas($('#canvas')).then(function(canvas) { 
    $('canvas').addClass('canvas-layout'); 
    var src = canvas.toDataURL(); 
    var output=src.replace(/^data:image\/(png|jpg);base64,/, ""); 
    $.post('result.php', { data: output }) 
     .done(function(response) { 
      console.log(response); 
     } 
    ); 
    return false; 
}); 

.

$decodedData = base64_decode($_POST['data']); 

$img = $decodedData; 

$image = fopen($img, 'r'); 
file_put_contents("images/layout.png", $image); 
fclose($image); 

Ama bir uyarı I) (fopen bir dize geçiyorum söyleyerek olsun - bu çözüm başka stackoverflow sonrası verilen ve olmasına rağmen insanlar bu olsun gibiydi: result.php dosyasında, ben Çalışma. Başlangıçta, js sadece bu yüzden gibi yeni bir pencerede görüntüyü açtı:

window.open(src,'Image','width=1440,height=650,resizable=1'); 

Ama tarayıcı penceresinde URL'yi ile bir şey yapamaz base64 kodlanmış dizedir.

Elde etmek istediklerimi gerçekleştirmenin bir yolu var mı?

Teşekkürler

Answer 1

Tamam - Sıralamalarım var. Temel olarak, yazabilmemiz için dizeden başka bazı verileri kırpmam gerekiyordu.

Yani, file_put_contents önce bu kodu eklendi:

$img = $_POST['data']; // Using the raw encoded string 
$img = str_replace('data:image/png;base64,', '', $img); // removed unnecessary string 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); // then decoded it 
$file = "images/layout-file_". uniqid().".png"; // define new image name 
$success = file_put_contents($file, $data); // finally write to server 

o benzersiz adlı dosyayı oluşturur ve bozuk değil Bu şekilde.