24.04.2015, 23:50
|
|
Аспирант
|
|
Регистрация: 13.09.2012
Сообщений: 38
|
|
Canvas toDataURL
Здравствуйте, сохраняю холст в картинку в итоге получается не большая картинка, как сделать большую и высокого качества
делаю так:
var imgData = canvas.toDataURL("image/png", 1.0);
отправляю методом пост,
получаю
$dataPhoto = str_replace('data:image/png;base64,', '', $_POST['photo']);
$dataPhoto = base64_decode( str_replace(' ', '+', $dataPhoto) );
file_put_contents($name,$dataPhoto);
В итоге качество низкое и размер не большой
|
|
25.04.2015, 07:53
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
str_replace(' ', '+', $dataPhoto) - это что такое?
str_replace('data:image/png;base64,', '', $_POST['photo']) - это все что нужно, пробелов в строке base64 быть не должно.
А сохранится в том размере, в котором и было создано в canvas. Кстати toDataURL по умолчанию возвращает и png, и с качеством 1.
|
|
25.04.2015, 17:54
|
|
Аспирант
|
|
Регистрация: 13.09.2012
Сообщений: 38
|
|
Сообщение от laimas
|
str_replace(' ', '+', $dataPhoto) - это что такое?
str_replace('data:image/png;base64,', '', $_POST['photo']) - это все что нужно, пробелов в строке base64 быть не должно.
А сохранится в том размере, в котором и было создано в canvas. Кстати toDataURL по умолчанию возвращает и png, и с качеством 1.
|
Почему без str_replace(' ', '+', $dataPhoto) некоторые картинки получались битыми, на каком то зарубежном форуме прочитал про это, после этого стало все ок, пока ок...
Я понял причину низкого качества, когда создается canvas образ, то canvas имеет не большой размер, поэтому и изображения получаются такого же размера.
Вопрос, а можно как то увеличивать размер и брать изображений исходного качества
|
|
25.04.2015, 18:38
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Выполните такой пример:
<?
echo '<pre>';
$im = chunk_split(base64_encode(file_get_contents('name.ext')));
echo $im;
file_put_contents('new.ext', base64_decode($im));
Не смотря на то, что строка base64 разбита на фрагменты (по умолчанию "\r\n"), из этой строки не проблема получить изображение. Собственно таким образом поступают с изображениями например, вставленными в тело почтового html-отправления.
Но чтобы строка изображения в base64 разрывалась пробелами, такого не встречал ни разу. Если такое есть, это значит баг при передачи данных на сервер.
Увеличить то можно в canvas, есть метод такой, но вопрос в том на сколько увеличить. Ведь чтобы при увеличении даже в два раза получилось качество, нужно не просто увеличить, но и использовать фильтр подходящий, дающий приемлемое качество.
|
|
26.04.2015, 11:28
|
|
Аспирант
|
|
Регистрация: 13.09.2012
Сообщений: 38
|
|
Сообщение от laimas
|
Выполните такой пример:
<?
echo '<pre>';
$im = chunk_split(base64_encode(file_get_contents('name.ext')));
echo $im;
file_put_contents('new.ext', base64_decode($im));
Не смотря на то, что строка base64 разбита на фрагменты (по умолчанию "\r\n"), из этой строки не проблема получить изображение. Собственно таким образом поступают с изображениями например, вставленными в тело почтового html-отправления.
Но чтобы строка изображения в base64 разрывалась пробелами, такого не встречал ни разу. Если такое есть, это значит баг при передачи данных на сервер.
Увеличить то можно в canvas, есть метод такой, но вопрос в том на сколько увеличить. Ведь чтобы при увеличении даже в два раза получилось качество, нужно не просто увеличить, но и использовать фильтр подходящий, дающий приемлемое качество.
|
С вашим кодом изображения малевича получаются, черные квадраты.
Увеличить нужно в 1,5 раза где то, а что за метод, что за фильтр можно ссылку пожалуйста.
|
|
26.04.2015, 12:50
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Если изображение указано реальное, а квадрат Малевича, значит баг на сервере. Вот получение вашей аватарки как строки в base64, с разбиением ее на фрагменты, затем обратное преобразование, создание GD-ресурса изображения из строки, увеличение в 1.5 и вывод его:
<?php
$im = chunk_split(base64_encode(file_get_contents('http://javascript.ru/forum/image.php?u=23328&dateline=1347558070')));
if($im = imagecreatefromstring(base64_decode($im))) {
$im = imagescale($im, imagesX($im)*1.5, imagesY($im)*1.5, IMG_TRIANGLE);
header('Content-Type: image/jpeg');
imagejpeg($im);
imagedestroy($im);
}
Исполнятся может только под РНР не ниже 5.5, не охота писать код под imagecopyresampled(), да и в младших версиях нет фильтров интерполяции, которые и используются при преобразованиях. Если у вас доступна 5.5, но при выполнении этого кода не будет вывода изображения в браузер, значит какие-то проблемы с сервером.
Если же будет, значит первый пример вы запускали некорректно. При исполнении кода замените тип фильтра преобразования IMG_TRIANGLE на IMG_BICUBIC_FIXED (этот фильтр в GD используется по умолчанию), и посмотрите разницу.
Зачем на клиенте увеличивать изображение, которое потом в base64 передавать на сервер? Строка base64, это почти в три раза больший объем данных, чем исходные, то есть изображение 50 КБ, для передачи будет уже 150 КБ. То есть выгоднее передавать на сервер исходное, а увеличить уже на сервере. Более того, если "Я понял причину низкого качества, когда создается canvas образ, то canvas имеет не большой размер, поэтому и изображения получаются такого же размера.", значит у вас есть исходное, а меньший размер по причине того, что неверно используется canvas, и увеличивать ни чего не надо.
Необходимость преобразований изображения на клиенте, ну это например в визуальном html-реадакторе при вставке в текст изображения, или визуализация преобразований перед загрузкой изображения на сервер. В этом случае на клиенте, и тут можно использовать (как примеры):
фильтры в canvas
еще использование фильтров
В canvas метод масштабирования, это scale(), трансформации, это transform(), setTransform().
Матрицы различных фильтров можно найти в сети. А как влияет метод интерполяции при масштабировании изображения можно почитать тут.
Последний раз редактировалось laimas, 26.04.2015 в 13:12.
|
|
26.04.2015, 21:52
|
|
Аспирант
|
|
Регистрация: 13.09.2012
Сообщений: 38
|
|
Спасибо большое!
|
|
30.05.2017, 06:28
|
Новичок на форуме
|
|
Регистрация: 28.02.2016
Сообщений: 1
|
|
по str_replace(' ', '+', $dataPhoto)
нужен на случай если данные не прошли предварительную кодировку encodeuricomponent, тогда '+' будет преобразован в ' ' и при сохранении в файл на сервере произойдёт ошибка кодировки
|
|
|
|