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

Posted 2023-03-15

【中文标题】Fabric.js canvas.toDataURL() 通过 Ajax 发送到 PHP

【英文标题】：Fabric.js canvas.toDataURL() sent to PHP by Ajax

【发布时间】：2012-04-04 01:05:36

【问题描述】：

当我需要创建具有透明背景的图像时，我遇到了问题。我仍然不知道问题出在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）； // [数据库代码] 回声“确定”； 别的 回声“错误”；

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

【参考方案1】：

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

//createImage.php

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

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

【参考方案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';
          

【参考方案3】：

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

【参考方案4】：

最后一步完全相反：

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

瞧！图片是透明的！

【参考方案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 通道的“真彩色”图像。

【讨论】：

我尝试使用您的解决方案，但我仍然得到黑色背景而不是透明背景的图像。我注意到的是，最终图像在您的解决方案中看起来更好。之前，使用我的代码，最终图像在 png 图像中具有难看的白色锯齿状边框，在我放在画布内的文本中具有锯齿状边框。现在，使用您的代码建议，这个丑陋的锯齿状边框在最终图像中不再存在。这很好，但我仍然有透明背景的问题。我的：link 你的：link

现在我解决了。我正在使用 PHP 的 GD lib 的新功能。问题出在 PHP 而不是 Fabric.js 中。检查这个link

太好了，很高兴你能解决这个问题。 你最终不得不使用的功能是什么？哦，没关系，我刚刚看到你的要点。因此，在将源复制到其上之前，您必须明确地用完全透明的方式填充真彩色图像。嗯。真正的wtfphp。