Canvas toDataURL

[darl]

Здравствуйте, сохраняю холст в картинку в итоге получается не большая картинка, как сделать большую и высокого качества
делаю так:

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);

В итоге качество низкое и размер не большой

[laimas]

str_replace(' ', '+', $dataPhoto) - это что такое?
str_replace('data:image/png;base64,', '', $_POST['photo']) - это все что нужно, пробелов в строке base64 быть не должно.

А сохранится в том размере, в котором и было создано в canvas. Кстати toDataURL по умолчанию возвращает и png, и с качеством 1.

[darl]

str_replace(' ', '+', $dataPhoto) - это что такое?
str_replace('data:image/png;base64,', '', $_POST['photo']) - это все что нужно, пробелов в строке base64 быть не должно.

А сохранится в том размере, в котором и было создано в canvas. Кстати toDataURL по умолчанию возвращает и png, и с качеством 1.

Почему без str_replace(' ', '+', $dataPhoto) некоторые картинки получались битыми, на каком то зарубежном форуме прочитал про это, после этого стало все ок, пока ок...
Я понял причину низкого качества, когда создается canvas образ, то canvas имеет не большой размер, поэтому и изображения получаются такого же размера.
Вопрос, а можно как то увеличивать размер и брать изображений исходного качества

[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, есть метод такой, но вопрос в том на сколько увеличить. Ведь чтобы при увеличении даже в два раза получилось качество, нужно не просто увеличить, но и использовать фильтр подходящий, дающий приемлемое качество.

[darl]

<?
echo '<pre>';
$im = chunk_split(base64_encode(file_get_contents('name.ext')));
echo $im;
file_put_contents('new.ext', base64_decode($im));

С вашим кодом изображения малевича получаются, черные квадраты.

Увеличить нужно в 1,5 раза где то, а что за метод, что за фильтр можно ссылку пожалуйста.

[laimas]

Если изображение указано реальное, а квадрат Малевича, значит баг на сервере. Вот получение вашей аватарки как строки в 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().
Матрицы различных фильтров можно найти в сети. А как влияет метод интерполяции при масштабировании изображения можно почитать тут.

[darl]

Спасибо большое!

[February28]

нужен на случай если данные не прошли предварительную кодировку encodeuricomponent, тогда '+' будет преобразован в ' ' и при сохранении в файл на сервере произойдёт ошибка кодировки