Question

当我需要创建具有透明背景的图像时，我遇到了问题。我仍然不知道问题是使用fabricjs还是使用php。当我发送带有彩色背景的图像时，一切正常。发送带透明背景的图像时会出现问题。生成的图像使用黑色背景创建。那么，让我解释一下：当用户单击“保存”按钮时，我将画布的字符串表示形式发送到服务器端的php，以生成画布的图像。所以我使用follow函数通过Ajax发送画布的字符串表示形式（jQuery的POST函数）：


    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.");
            }
        });
    }

在PHP文件中我使用以下代码生成图像：


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

同样，问题在于背景透明画布。彩色背景一切正常。

Answer 1

最后一步恰恰相反：

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

瞧！图像是透明的！

Answer 2

为什么你使用GD呢？您可以使用file_put_contents从画布中保存png文件。

// createImage.php

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

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

Answer 3

我不知道这是否正是您遇到的问题，但是某些GD库的imagecreate*函数会创建没有Alpha通道的图像。

我找到的解决方法是使用imagecreatetruecolor创建图像并将透明图像复制到其上。

尝试这样的过程：

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

这应该确保您使用正确的Alpha通道获得“真彩色”图像。

Answer 4

JPG toDataURL将透明背景转换为黑色。

Answer 5

我有完全相同的问题，并添加了这个 imageAlphaBlending（$ img，true）;
imageSaveAlpha（$ img，true）;
到rodrigopandini的代码，它现在完美无缺。：）

 // 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（）由Ajax发送给PHP

5 个答案: