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 image with colored background. The problem occurs when I send a image with transparent background. The generated image is created with black background. So, let me explain better: When the user click in save button, I´m sending the string representation of the canvas to php in the server-side, to be generated the image of the canvas. So I´m using the follow function to sending the string representation of the canvas by Ajax (POST function of 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.");
            }
        });
    }

In PHP file I´m using the follow code to generate the image:


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

Again, the problem is just with background transparent canvas. With colored background everything works fine.

score 3 · Answer 1 · answered Nov 07 '12 at 21:53

3

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!

answered Nov 07 '12 at 21:53

Kr1xX

31
2

score 2 · Answer 2 · answered Apr 11 '14 at 15:23

2

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

answered Apr 11 '14 at 15:23

Ron Balnen

21
1
3

score 1 · Answer 3 · answered Mar 20 '12 at 16:33

1

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.

answered Mar 20 '12 at 16:33

goldenapples

386
1
15

I try use your solution, but I´m still getting a black background instead a image with tranparent background. Something that I noticied is that the final image has better look with your solution. Before, with my code, the final image has a uggly white serrated border in a png image and serrated border in texts that I put inside the canvas. Now, using your code sugestion, this uggly serrated border has no more in the final image. That´s good, but I still have the problem with transparent background. my: [link](http://f.imgtmp.com/puy05.png) your: [link](http://f.imgtmp.com/EGWel.png) – rodrigopandini Mar 21 '12 at 16:36
Now I resolve it. I´m using new function of GD lib of PHP. The problem is in PHP not in Fabric.js. Check this [link](https://gist.github.com/2149853) – rodrigopandini Mar 21 '12 at 17:30
Great, glad you were able to work it out. ~~What was the function you ended up having to use?~~ oh, never mind, I just saw your gist. So you had to explicitly fill the true color image with full transparency before copy your source onto it. Huh. wtfphp for real. – goldenapples Mar 21 '12 at 20:01

score 0 · Answer 4 · answered Feb 12 '13 at 22:28

0

JPG toDataURL transforms transparent background to black.

answered Feb 12 '13 at 22:28

coulix

3,328
6
55
81

score 0 · Answer 5 · answered Dec 12 '13 at 00:53

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

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

5 Answers5

Linked