Fabric.js canvas.toDataURL() 通过 Ajax 发送到 PHP

Question

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

函数发送字符串表示（）{ var strDataURI = canvas.toDataURL(); strDataURI = strDataURI.substr(22, strDataURI.length); $.post("action/createImage.php", { 字符串：strDataURI }, 功能（数据）{ 如果（数据==“确定”）{ $("#msg").html("图像创建。"); } 别的{ $("#msg").html("图像未创建。"); } }); }

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

// createImage.php $data = base64_decode($_POST["str"]); $urlUploadImages = "../uploads/img/"; $nameImage = "test.png"; $img = imagecreatefromstring($data); 如果（$img）{ imagepng($img, $urlUploadImages.$nameImage, 0); 图像销毁（$img）； // [数据库代码] 回声“确定”； } 别的 { 回声“错误”； }

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

Answer 1

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

//createImage.php

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

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

Answer 2

我遇到了完全相同的问题并添加了这个
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';
          }

Answer 3

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

Answer 4

最后一步完全相反：

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

瞧！图片是透明的！

Answer 5

我不知道这是否正是您遇到的问题，但是 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 通道的“真彩色”图像。