Fabric.js canvas.toDataURL () отправлено в PHP Ajax

Question

У меня проблема здесь, когда мне нужно создать изображение с прозрачным фоном.Я до сих пор не знаю, проблема ли с fabricjs или с php.Все отлично работает, когда я отправил изображение с цветным фоном.Проблема возникает, когда я отправляю изображение с прозрачным фоном.Сгенерированное изображение создано с черным фоном.Итак, позвольте мне объяснить лучше: когда пользователь нажимает кнопку «Сохранить», я отправляю строковое представление canvas на php на стороне сервера, чтобы сгенерировать изображение canvas.Поэтому я использую функцию follow для отправки строкового представления холста с помощью Ajax (функция POST 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.");
            }
        });
    }

В 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

Я не знаю, является ли это именно той проблемой, с которой вы столкнулись, но некоторые функции imagecreate* библиотеки GD создают изображения без альфа-канала.

Обходной путь, который я нашел, - это создать изображение с помощью 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 );

Это должно гарантировать, что вы получите изображение «истинного цвета» с правильным альфа-каналом.

Answer 4

У меня была точно такая же проблема, и я добавил это
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';
          }

Answer 5

JPG toDataURL преобразует прозрачный фон в черный.