Fabric.js canvas.toDataURL(）由Ajax发送到PHP

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

本文关键字：Ajax PHP js canvas toDataURL Fabric      更新时间：2023-09-26

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

函数sendStringRepresentation（）{var strDataURI=canvas.toDataURL（）；strDataURI=strDataURI.substr（22，strDataURI.length）；$.post（"action/createImage.php"，｛str:strDataURI}，函数（数据）{if（data="OK"）{$（"#msg"）.html（"图像已创建。"）；}其他{$（"#msg"）.html（"未创建图像。"）；}})；}

在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）；//[数据库代码]echo"OK"；}其他{echo"ERROR"；}

同样，问题只是背景透明画布。有了彩色背景，一切都很好。

最后一步完全相反：

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

瞧！图像是透明的！

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

//createImage.php

$data = base64_decode($_POST["str"]);
$urlUploadImages = "../uploads/img/test.png";
file_put_contents($urlUploadImages, $data);

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

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

我遇到了完全相同的问题，并添加了这个
imageAlphaBlending（$img，true）
imageSaveAlpha（$img，true）
到罗德里戈潘迪尼的代码，它现在工作得很完美。：）

 // 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';
          }
相关文章：