HTML5 Canvas создан JPEG «поврежден» или «поврежден»?

Question

HTML5 Canvas создан JPEG «поврежден» или «поврежден»?

1

У меня есть простой объект Canvas HTML5, который после сохранения в файл открывает перфекционизм в Photoshop и выглядит корректно, но в соответствии с Windows и OSX "поврежден" или "поврежден".

Код, который я использую, очень прост:

JavaScript:

var dataURL = canvas.toDataURL({
    format: 'jpeg',
    quality: 0.8
});

А затем отправив dataURL через AJAX:

      $.ajax({
         type: "POST",
         url: "scripts/saveImage.php",
         data: {
            imgBase64: dataURL
         }
      })

Для простого PHP-скрипта:

$imageBase64 = $_POST['imgBase64'];
$imageData = base64_decode($imageBase64);
file_put_contents($fileName,$imageData);

Файл создается файлом. Я могу открыть его в Photoshop, и он выглядит точно так, как ожидалось. Редактор HEX показывает, что JFIF в своих заголовках, как и ожидалось для JPEG, тоже:

Но вы не можете открыть файл в предварительном просмотре Windows или OSX:

Я сделал что-то не так? Есть ли что-то в заголовке файла, который отбрасывает Windows/OSX? Или это ожидаемое поведение для JPEG, созданного таким образом?

Chuck Le Butt 31 май 2015, в 22:01

Источник

0

Это toDataURL({ format: 'jpeg', quality: 0.8 }) API браузера? Или вы используете какую-то дополнительную библиотеку? Дополнительный плагин? Насколько я знаю, правильное использование это: canvas.toDataURL("image/jpeg", 0.8);
Guilherme Nascimento 31 май 2015, в 19:23
0

Не могли бы вы прикрепить поврежденный файл JPEG?
georg 31 май 2015, в 19:44
0

Я использую FabricJS, может быть, в этом причина? Я посмотрю, смогу ли я прикрепить изображение.
Chuck Le Butt 31 май 2015, в 20:47
1

У меня была та же проблема, оказалось, что «dataURL» начинался с data/base64encoded или чего-то такого же, а затем следовал за изображением. Я должен был удалить начало, и тогда это сработало. РЕДАКТИРОВАТЬ: Вот точный код base64_decode(str_replace(' ', '+', str_replace('data:image/png;base64,', '', \Input::data('base64image'))));
php_nub_qq 31 май 2015, в 20:56
0

@php_nub_qq Спасибо большое !!! Поместите это в ответ, и я приму.
Chuck Le Butt 31 май 2015, в 22:26

Показать ещё 3 комментария

Теги:

php

javascript

html5

canvas

fabricjs

1 ответ

Ещё вопросы

Это toDataURL({ format: 'jpeg', quality: 0.8 }) API браузера? Или вы используете какую-то дополнительную библиотеку? Дополнительный плагин? Насколько я знаю, правильное использование это: canvas.toDataURL("image/jpeg", 0.8);
Не могли бы вы прикрепить поврежденный файл JPEG?
Я использую FabricJS, может быть, в этом причина? Я посмотрю, смогу ли я прикрепить изображение.
У меня была та же проблема, оказалось, что «dataURL» начинался с data/base64encoded или чего-то такого же, а затем следовал за изображением. Я должен был удалить начало, и тогда это сработало. РЕДАКТИРОВАТЬ: Вот точный код base64_decode(str_replace(' ', '+', str_replace('data:image/png;base64,', '', \Input::data('base64image'))));
@php_nub_qq Спасибо большое !!! Поместите это в ответ, и я приму.

php_nub_qq · Accepted Answer · 2015-06-01T05-14-00.000Z

У меня была такая же проблема, оказалось, что "dataURL" начался с data:image/png;base64, что путает читательские программы, такие как Windows Media Viewer и т.д.

Чтобы решить проблему, я использовал этот код

$file = base64_decode(str_replace(' ', '+', str_replace('data:image/png;base64,', '', \Input::data('base64image'))));

Думаю, вам придется изменить это на

$file = base64_decode(str_replace(' ', '+', str_replace('data:image/jpeg;base64,', '', $_POST['imgBase64'])));

Честно говоря, я не помню, какова цель первого str_replace, и именно поэтому я включил его в ответ, потому что это может сломать что-то, если я удалю его.

Возможно, потому что вы отправляли изображение через URL? Я сохранил это, хотя я размещаю данные, и это все еще работало. Еще раз спасибо!
@ Чак У меня просто была другая идея для улучшения производительности - вместо использования str_replace вы можете использовать substr и удалить первые x символов, так как это всегда будет в начале и будет постоянной длины. Кроме того, нет, это не отправлено через URL, это довольно плохая идея: D