Fabric.js canvas.toDataURL() enviado a PHP por Ajax

Question

Tengo un problema aquí cuando necesito crear una imagen con fondo transparente. Todavía no sé si el problema es con fabricjs o con php. Todo funciona bien cuando envío una imagen con fondo de color. El problema ocurre cuando envío una imagen con fondo transparente. La imagen generada se crea con fondo negro. Así que, déjenme explicarlo mejor: Cuando el usuario hace clic en el botón Guardar, estoy enviando la representación de cadena del lienzo a php en el lado del servidor, para que se genere la imagen del lienzo. Así que estoy usando la función de seguimiento para el envío de la representación de cadena de la lona por el Ajax (función de la POST de 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."); 
      } 
     }); 
    } 

En PHP archivo Estoy utilizando el código de seguimiento para generar la imagen:

 

    // 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'; 
    } 

Una vez más, el problema es solo con el lienzo transparente de fondo. Con fondo de color todo funciona bien.

Answer 1

No sé si este es exactamente el problema que está experimentando, pero algunas de las funciones de la biblioteca GD imagecreate* crean imágenes sin el canal alfa.

La solución alternativa que he encontrado es crear una imagen usando imagecreatetruecolor y copiar su imagen transparente en ella.

Pruebe un proceso como este:

$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); 

que deben garantizar que terminas una imagen de "color verdadero" con el canal alfa adecuada con.

Answer 2

El último paso es todo lo contrario:

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

y listo! ¡La imagen es transparente!

Answer 3

JPG toDataURL transforma el fondo transparente en negro.

Answer 4

Tuve exactamente el mismo problema y agregué
imageAlphaBlending ($ img, true);
imageSaveAlpha ($ img, true);
al código de rodrigopandini y funciona perfecto ahora. :)

// 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

¿Por qué utilizó GD para esto? Puede usar file_put_contents para guardar el archivo png de su lienzo.

// createImage.php

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

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