VPF::загрузить картинку отображаемую на канве FabrickJS

mstdmstd

Дата 12.11.2015, 16:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 394
Регистрация: 30.12.2008

Репутация: нет
Всего: нет

Всем привет,
Используя FabrickJS канву, мне нужно загрузить картинку отображаемую на канве :
Делаю :

Код


                alert( "downloadable_stage::"+var_dump(downloadable_stage) ) -- вывод дампа обекта канфы - ниже
                var imageURL = downloadable_stage.toDataURL("image/png").replace("image/png", "image/octet-stream");
                var anchor = document.createElement("a");
                anchor.href = imageURL
                anchor.download = postTitle.replace(/ /g, "-") + ".png"
                anchor.click()

И этот код нормально отрабатывает и картинка загружается в моем Chromium.
Попоробовал загрузить в Opera - работает нормально, а в  Firefox не работает - причем в консоле никаких ошибок или варнингов нет.
  В моем Firefox файлы грузятся нормально.
  Клиент пишет, что у него в Chromium загрузка не работает.
  Не подскажите, в чем может быть проблема? Может ли причина быть в настойках браузеров или блокировках ? Каких?

дамп канвы  :

Цитата

downloadable_stage::obj._objects = #<fabric.Image: { src: "http://local-displo-wp.com/backend/static/uploads/themes/18/7d9a55e932f7.jpg" }>,#<fabric.Text (1): { "text": "Cat & Dog", "fontFamily": "Alef" }>,#<fabric.Text (1): { "text": "Footer Textn", "fontFamily": "Alef" }>obj.lowerCanvasEl = [object HTMLCanvasElement]obj.contextContainer = [object CanvasRenderingContext2D]obj.width = 1240.16obj.height = 1748.03obj.viewportTransform = 1,0,0,1,0,0obj._offset = [object Object]obj._currentTransform = nullobj._groupSelector = nullobj.wrapperEl = [object HTMLDivElement]obj.upperCanvasEl = [object HTMLCanvasElement]obj.contextTop = [object CanvasRenderingContext2D]obj._onMouseDown = function () { [native code] }obj._onMouseMove = function () { [native code] }obj._onMouseUp = function () { [native code] }obj._onResize = function () { [native code] }obj._onGesture = function () { [native code] }obj._onDrag = function () { [native code] }obj._onShake = function () { [native code] }obj._onLongPress = function () { [native code] }obj._onOrientationChange = function () { [native code] }obj._onMouseWheel = function () { [native code] }obj.freeDrawingBrush = [object Object]obj.cacheCanvasEl = [object HTMLCanvasElement]obj.contextCache = [object CanvasRenderingContext2D]obj._activeGroup = nullobj._activeObject = nullobj.renderOnAddRemove = trueobj._hasITextHandlers = trueobj.__eventListeners = [object Object]...

Это сообщение отредактировал(а) mstdmstd - 21.11.2015, 10:31

mstdmstd

Дата 15.11.2015, 15:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 394
Регистрация: 30.12.2008

Репутация: нет
Всего: нет

Кому несложно, зайдите, пожалуйста, на
http://displo.com/wp-content/plugins/woo-d...&item_id=35
в разных браузерах и ниже картинки  кликните  на "Download". Подтвердите конфермацию.
У меня под Kubuntu 14.10 (64-bit)  Opera 32 и Chromium  43.0.2357.130 грузят картинку нормально
Firefox 39 картинок не грузит Ошибок или варнингов нет
Стоит несколько разширений(включая adblock) -  я их все задизейблил и перезапустил браузер - не помогло...

Это сообщение отредактировал(а) mstdmstd - 21.11.2015, 10:29

mstdmstd

Дата 17.11.2015, 16:16 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 394
Регистрация: 30.12.2008

Репутация: нет
Всего: нет

Я поменял вывод этой строки со сформированным урлом на window.location:

Код


                var imageURL = downloadable_stage.toDataURL("image/png").replace("image/png", "image/octet-stream");
                alert( "imageURL::"+var_dump(imageURL) )
                window.location = imageURL;

алерт вывел такой тест(ниже)
и открыватся стандартное окно для сохранения файла загрузки - файл сохраняется на диске, но с именем вроде XGBoAro8.
есть ли возможность сохранить этот файл под его именем ?

Код


imageURL::data:image/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAABNgAAAbUCAYAAAAt66suAAAgAElEQVR4nOzd53dcVb6v+/...

ksnk

Дата 19.11.2015, 12:50 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(mstdmstd @ 17.11.2015, 16:16

)

есть ли возможность сохранить этот файл под его именем ?

Как всегда в это мире - "не всегда".
У ссылки есть специальный атрибут `download` который определяет имя файла для сохранения на клиентской машине. Кое где - работает.
Проверить можно здесь. Какие-то броузеры игнорируют атрибут download у ссылки.

Более кроссброузерное решение - загрузить картинку на сервер, и тут-же отдать ее пользователю с нужным именем.
А можно подождать, пока мир не станет лучше.

Добавлено через 1 минуту и 57 секунд
Отредактируй, pls, свое первое сообщение - "дамп канвы". Его можно поместить в тег `Цитата` вместо код.

Это сообщение отредактировал(а) ksnk - 19.11.2015, 12:50

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

mstdmstd

Дата 21.11.2015, 10:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 394
Регистрация: 30.12.2008

Репутация: нет
Всего: нет

Цитата(ksnk @ 19.11.2015, 12:50

)

Более кроссброузерное решение - загрузить картинку на сервер, и тут-же отдать ее пользователю с нужным именем.

А как это можно сделать?
У меня есть переменная imageURL содержимое которой алертом выводится как :

Цитата

data:image/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAABNgAAAbUCAYAAAAt66suAAAgAElEQVR4Xuz9S69tyZre94113XvnPQ8PBRASYNO0GzZEQQKshvuCLJosVhWLRRaLF5UsU5Dgjr+MW6ZtQhaLVBVLZNEUSd3csN02/AV8odhwFYp1TubJzL33uhvPiPmb81mxVyYP3HUsYGGuNeYYcXnjjR...

Я могу передать содержимое этой переменной в ajax-запрос и в нем эту переменную нужно декодировать через base64_decode ?
И потом клиенту выдавать этот файл с нужным именем?

ksnk

Дата 21.11.2015, 16:56 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Ну да, post'ом передать на сервер, строку порезать по символу ',', убедится, что последнее слово в первой половине - base64 и сделать base64_decode для второй.
Поставить хидеры и выдать наружу получившуюся строку
Что--то вроде

Код


$img='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"';

$img=explode(',',$img); // << сюда нужно добавить проверку на тип картинки и скорректировать хидеры
header('Content-type:image/gif');
echo base64_decode($img[1]);

Этот ответ добавлен с нового Винграда - http://vingrad.com

ksnk

Дата 21.11.2015, 17:00 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

header('Content-Disposition: attachment; filename="Image.png"');

Вот такой, примерно, заголовок нужно еще не забыть

Этот ответ добавлен с нового Винграда - http://vingrad.com

mstdmstd

Дата 24.11.2015, 07:29 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 394
Регистрация: 30.12.2008

Репутация: нет
Всего: нет

Cпасибо, кодировка работает нормально - валидный файл с картинкой успешно сохраняется - это если сохранять его во временном каталоге.
Но если написать как в примере:

Код


      header('Content-type:image/gif');
        echo base64_decode($image_text_array[1]);
        header('Content-Disposition: attachment; filename="template_image.jpg"');
        exit;

где $image_text_array[1] - валидный текст картинки - download для браузера(firefox, opera, cromium) не срабатывает - это с учетом, того что этот код вызывается
из ajax запроса-а. Что-то упущено в заголовке?
firebug показывает на возврате запроса заголовок png-картинки...

ksnk

Дата 24.11.2015, 08:10 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(mstdmstd @ 24.11.2015, 07:29

)

header('Content-type:image/gif');
        echo base64_decode($image_text_array[1]);
        header('Content-Disposition: attachment; filename="template_image.jpg"');
        exit;

Пример, очевидно, компиляция других примеров. Эту солянку нужно бы допилить "по месту".
Во первых - Заголовок Content-type должен соответствовать типу картинки, которая будет выдаваться. Если отдается в конце концов png - то image/png.
Во вторых - сначала выдаются заголовки, потом выводятся данные, так что вторую и третью строки нужно поменять местами.
Расширение файла в filename тоже, вообще говоря, должно бы соответствовать...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

mstdmstd

Дата 27.11.2015, 11:00 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 394
Регистрация: 30.12.2008

Репутация: нет
Всего: нет

И так я делал:

Код


    $image_text= !empty($_REQUEST['image']) ? $_REQUEST['image'] : '';
    $image_text_array= explode(',',$image_text);  
    if ( count($image_text_array) == 2 ) {
        header('Content-type:image/png');
        header('Content-Disposition: attachment; filename="template_image.png"');
        echo base64_decode($image_text_array[1]);  // текст картинки
        exit;
    }

В консоле браузера я вижу что возвращается png-картинка
http://s017.radikal.ru/i431/1511/43/0202d165107e.png
но диалог загрузки файла не открывается
И я видимо не упомянул ранее - этот процесс в ajax-запросе - в нем формируется картинка.
Получится ли в ajax-запросе? Или надо как-то иначе в ajax-запросе?

ksnk

Дата 27.11.2015, 12:12 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

mstdmstd,
В аяксе - не получится - тут важна игра с заголовками, а аякс все заголовки проглатывает сам. Нужно сформировать url ссылки, потом спровоцировать клик на нее.
$(...).trigger('click');

Открывать его в отдельное окно (target="_blank"), либо в собственном iframe
Вот так, например

Код


<a target="internal_iframe" href="link_to_image_to_download.jpg">Click me</a>
...
<iframe id="internal_iframe" name="internal_iframe" style="display:none;" src='javascript:void(0)'>
</iframe>

name и ID у ифрейма должны быть одинаковы. Это просто какая-то кроссброузерная магия.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »