Base64, imagecreatefromstring и черные квадраты?

Question

[whynot]

Здравствуйте. Понадобилось сделать сохранение промежуточных результатов из нарисованного канваса на сервере.

Одно «но» на сохраненные картинки нужно ставить вотермарк.

Делаю следующим образом:

var canvas = document.getElementById('canvas'),
        dataURL = canvas.toDataURL("image/jpeg");
    //отправляю POST-запрос с dataURL

На серверной стороне:

$dataURL = base64_decode(str_replace('data:image/jpeg;base64,', '', $_POST['dataURL']));
        $image = imagecreatefromstring($dataURL);
        ob_start();
        //где-нибудь тут ставлю вотермарк
        imagejpeg($image);
        $filename = 'test.jpeg';
        $binaryImage = ob_get_clean();
        $file = fopen ($filename, 'w');
        fwrite($file, $binaryImage);

И получаю черный квадрат. При этом, если я делаю что-то вроде

$dataURL = file_get_contents('1.jpeg');
        $image = imagecreatefromstring($dataURL);
        ob_start();
        //где-нибудь тут ставлю вотермарк
        imagejpeg($image);
        $filename = 'test.jpeg';
        $binaryImage = ob_get_clean();
        $file = fopen ($filename, 'w');
        fwrite($file, $binaryImage);

То всё в порядке. Из-за чего возникают сомнения в, как бы правильнее выразиться, правильном формате base64-строки на клиенте. Ощущение, что канвас выдает что-то, непонятное для php-шной imagecreatefromstring();

Не сталкивался никто?

Спасибо.

Comments

[B@rmaley.e><e]

  $dataURL = base64_decode(str_replace('data:image/jpeg;base64,', '', $_POST['dataURL']));
 $image = imagecreatefromstring($dataURL);

 $dataURL = base64_encode(file_get_contents('1.jpeg'));
 $image = imagecreatefromstring($dataURL);

Это опечатка, или вы действительно в первом случае декодируете данные в двоичный формат, а во втором наоборот кодируете из двоичного в base64?

[whynot]

Да, опечатка, поправил

Answer 1

[OlegTar]

Есть предположение, что в POST['dataURL'] попадаёт не вся строка.

выведите строку base64, которую получаете в JS.
выведите строку base64, которую получаете в POST['dataURL']

сравните их.

Comments

[whynot]

если я напрямую, минуя преобразования возвращаю пришедшую в скрипт строку — всё ок.
если я просто создаю изображение этой функцией — черный квадрат.

Answer 2

[webscout]

Проверил ваш скрипт. Именно с image/jpeg не работает. Если закодировать javascriptом в png, то все хорошо.

Из этого вывод: проблема не в base64_decode, проблема, скорее всего в кодировании браузером jpeg.
Если так нужен jpeg, как выходной формат, то может лучше конвертировать на сервере с помощью того же GD?

Comments

[whynot]

Пример с jpeg я привел, чтобы не было путаницы с альфа-каналами, изначально скрипт, естественно, работает с png. И точно таже самая проблема. Может, у меня gd неправильный?

[webscout]

Есть предположение, что браузер прозрачный цвет при преобразовании в jpg считает черным, а не белым. Соответственно, если картинка состоит только из черного цвета, то выйдет черный квадрат.

Я попробовал сохранить jpg и png, присланный браузером, БЕЗ обработки в GD:
1. JPG воспринимается сразу, как черный квадрат
2. PNG воспринимается корректно.

Однако, далее, если обработать PNG с помощью GD, выходит аналогичный черный квадрат. Видимо, GD тоже не очень корректно работает с альфа-каналом.

Answer 3

[OlegTar]

Какой браузер?
Щас проверил в Хроме. Оказывается, что если вызываешь метод toDataURL('image/jpeg');
Он выводит image/png!

В Файрфоксе такой проблемы нет.

Answer 4

[OlegTar]

Щас проверил.

В Хроме 8 можно писать, что хочешь в параметре toDataURL, даже белиберду, он будет возвращать всегда image/png

Firefox 3.6.13 на параметры смотрит: если в toDataURL пошлёшь параметр, который Firefox не знает, он ничего не выведет.
Пока выявил, что Firefox знает 2 параметра: image/png и image/jpg (ни image/gif, ни image/bmp не знает)