Fabric.js canvas.toDataURL(), отправленный в PHP с помощью Ajax

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

Опять же, проблема только с фоновым прозрачным холстом. С цветным фоном все работает нормально.


javascript canvas php fabricjs
person rodrigopandini    schedule 19.03.2012    source источник

Ответы (5)


arrow_upward
3
arrow_downward

Последний шаг совершенно противоположный:

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

И вуаля! Изображение прозрачное!

person Kr1xX    schedule 07.11.2012

arrow_upward
2
arrow_downward

Почему вы использовали GD для этого? Вы можете использовать file_put_contents для сохранения png-файла с вашего холста.

// создатьИзображение.php

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

$urlUploadImages = "../uploads/img/test.png";
file_put_contents($urlUploadImages, $data);
person Ron Balnen    schedule 11.04.2014

arrow_upward
1
arrow_downward

Я не знаю, является ли это именно той проблемой, с которой вы столкнулись, но некоторые функции 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 );

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

person goldenapples    schedule 20.03.2012
comment
Я пытаюсь использовать ваше решение, но я все еще получаю черный фон вместо изображения с прозрачным фоном. Я заметил, что финальное изображение лучше выглядит с вашим решением. Раньше, с моим кодом, окончательное изображение имело уродливую белую зубчатую рамку в изображении png и зубчатую рамку в текстах, которые я помещал внутрь холста. Теперь, используя ваш совет по коду, этой уродливой зазубренной границы больше нет на финальном изображении. Это хорошо, но у меня все еще есть проблема с прозрачным фоном. моя: ссылка ваша: ссылка - person rodrigopandini; 21.03.2012
comment
Сейчас решаю. Я использую новую функцию GD lib PHP. Проблема в PHP, а не в Fabric.js. Проверьте эту ссылку. - person rodrigopandini; 21.03.2012
comment
Отлично, рад, что у вас получилось. ‹strike›Какую функцию вам пришлось использовать?‹/strike› О, не важно, я только что увидел вашу суть. Таким образом, вам нужно было явно заполнить изображение в истинном цвете полной прозрачностью, прежде чем копировать на него исходный код. Хм. wtfphp на самом деле. - person goldenapples; 22.03.2012

arrow_upward
0
arrow_downward

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

person coulix    schedule 12.02.2013

arrow_upward
0
arrow_downward

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