Fabric.js canvas.toDataURL() sent to PHP by Ajax

Question

I have a problem here when I need create a image with transparent background. I still don´t know if the problem is with fabricjs or with php. Everything works fine when I sent a

Answer 1

Why did you use GD for this? You can use file_put_contents for save png file from your canvas.

// createImage.php

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

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

Answer 2

I don't know if this is exactly the problem you're experiencing, but some of the GD library's imagecreate* functions create images without the alpha channel.

The workaround I've found is to create an image using imagecreatetruecolor and copy your transparent image onto it.

Try a process like this:

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

That should ensure that you end up with a "true color" image with the proper alpha channel.

Answer 3

JPG toDataURL transforms transparent background to black.

Answer 4

I had the exact same problem and added this
imageAlphaBlending($img, true);
imageSaveAlpha($img, true);
to rodrigopandini's code and it works perfect now.:)

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

The last step is quite the opposite:

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

And voila! The image is transparent!