Fabric.js canvas.toDataURL() inviato a PHP da Ajax

Question

Ho un problema qui quando ho bisogno di creare un'immagine con sfondo trasparente. Non so ancora se il problema è con fabricjs o con php. Tutto funziona bene quando ho inviato un'immagine con sfondo colorato. Il problema si verifica quando invio un'immagine con uno sfondo trasparente. L'immagine generata viene creata con sfondo nero. Quindi, mi spiego meglio: Quando l'utente fa clic sul pulsante Salva, sto inviando la rappresentazione della stringa della tela su php sul lato server, per generare l'immagine della tela. Così sto utilizzando la funzione di seguito all'invio la rappresentazione di stringa della tela da Ajax (funzione POST di jQuery):

 

    function sendStringRepresentation(){ 
     var strDataURI = canvas.toDataURL(); 
     strDataURI = strDataURI.substr(22, strDataURI.length); 

     $.post("action/createImage.php", 
     { 
      str: strDataURI 
     }, 
     function(data){ 
      if(data == "OK"){ 
       $("#msg").html("Image created."); 
     } 
     else{ 
      $("#msg").html("Image not created."); 
      } 
     }); 
    } 

Nel file di Io PHP utilizzando il codice di seguito per generare l'immagine:

 

    // createImage.php 

    $data = base64_decode($_POST["str"]); 

    $urlUploadImages = "../uploads/img/"; 
    $nameImage = "test.png"; 

    $img = imagecreatefromstring($data); 

    if($img) { 
     imagepng($img, $urlUploadImages.$nameImage, 0); 
     imagedestroy($img); 

     // [database code] 

     echo "OK"; 
    } 
    else { 
     echo 'ERROR'; 
    } 

Anche in questo caso, il problema è solo con la tela di sfondo trasparente. Con lo sfondo colorato tutto funziona bene.

Answer 1

Non so se questo è esattamente il problema che si verifica, ma alcune delle funzioni imagecreate*10 della libreria GD creano immagini senza il canale alfa.

La soluzione che ho trovato è quella di creare un'immagine utilizzando imagecreatetruecolor e copiare l'immagine trasparente su di esso.

Prova un processo come questo:

$img = imagecreatefromstring($data); 
$w = imagesx($img); 
$h = imagesy($img); 
$alpha_image = imagecreatetruecolor($w, $h); 
imagecopyresampled($alpha_image, $img, 0, 0, 0, 0, $w, $h, $w, $h); 

Questo dovrebbe garantire che si finisce con un'immagine "vero colore" con il corretto canale alfa.

Answer 2

L'ultimo passo è esattamente il contrario:

imagecopyresampled($img, $alpha_image, 0, 0, 0, 0, $w, $h, $w, $h); 

E voilà! L'immagine è trasparente!

Answer 3

JPG toDataURL trasforma lo sfondo trasparente in nero.

Answer 4

Ho avuto lo stesso problema e ho aggiunto questo
imageAlphaBlending ($ img, true);
imageSaveAlpha ($ img, true);
al codice del rodrigopandini e funziona perfetto ora. :)

// createImage.php 

$data = base64_decode($_POST["str"]); 

$urlUploadImages = "../uploads/img/"; 
$nameImage = "test.png"; 

     $img = imagecreatefromstring($data); 

     imageAlphaBlending($img, true); 
     imageSaveAlpha($img, true); 

if($img) { 
    imagepng($img, $urlUploadImages.$nameImage, 0); 
    imagedestroy($img); 

    // [database code] 

    echo "OK"; 
    } 
    else { 
      echo 'ERROR'; 
      } 

Answer 5

Perché ha utilizzato GD per questo? Puoi usare file_put_contents per salvare il file png dal tuo canvas.

// createImage.php

$data = base64_decode($_POST["str"]); 

$urlUploadImages = "../uploads/img/test.png"; 
file_put_contents($urlUploadImages, $data);