Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.04.2015, 23:50
Аватар для darl
Аспирант
Отправить личное сообщение для darl Посмотреть профиль Найти все сообщения от darl
 
Регистрация: 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);

В итоге качество низкое и размер не большой
Ответить с цитированием
  #2 (permalink)  
Старый 25.04.2015, 07:53
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

А сохранится в том размере, в котором и было создано в canvas. Кстати toDataURL по умолчанию возвращает и png, и с качеством 1.
Ответить с цитированием
  #3 (permalink)  
Старый 25.04.2015, 17:54
Аватар для darl
Аспирант
Отправить личное сообщение для darl Посмотреть профиль Найти все сообщения от darl
 
Регистрация: 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 имеет не большой размер, поэтому и изображения получаются такого же размера.
Вопрос, а можно как то увеличивать размер и брать изображений исходного качества
Ответить с цитированием
  #4 (permalink)  
Старый 25.04.2015, 18:38
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 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, есть метод такой, но вопрос в том на сколько увеличить. Ведь чтобы при увеличении даже в два раза получилось качество, нужно не просто увеличить, но и использовать фильтр подходящий, дающий приемлемое качество.
Ответить с цитированием
  #5 (permalink)  
Старый 26.04.2015, 11:28
Аватар для darl
Аспирант
Отправить личное сообщение для darl Посмотреть профиль Найти все сообщения от darl
 
Регистрация: 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 раза где то, а что за метод, что за фильтр можно ссылку пожалуйста.
Ответить с цитированием
  #6 (permalink)  
Старый 26.04.2015, 12:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 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.
Ответить с цитированием
  #7 (permalink)  
Старый 26.04.2015, 21:52
Аватар для darl
Аспирант
Отправить личное сообщение для darl Посмотреть профиль Найти все сообщения от darl
 
Регистрация: 13.09.2012
Сообщений: 38

Спасибо большое!
Ответить с цитированием
  #8 (permalink)  
Старый 30.05.2017, 06:28
Новичок на форуме
Отправить личное сообщение для February28 Посмотреть профиль Найти все сообщения от February28
 
Регистрация: 28.02.2016
Сообщений: 1

по str_replace(' ', '+', $dataPhoto)
нужен на случай если данные не прошли предварительную кодировку encodeuricomponent, тогда '+' будет преобразован в ' ' и при сохранении в файл на сервере произойдёт ошибка кодировки
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 16:46
Canvas картинка с обесцвечиванием. cheba Общие вопросы Javascript 9 31.05.2013 09:13
Почему неправильно вырисовывается canvas? Amateur Events/DOM/Window 0 19.09.2012 10:45
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16