Как сохранить png из переменной javascript - PullRequest
Новая
       3

Как сохранить png из переменной javascript

20 голосов
/ 11 октября 2010

У меня есть изображение, закодированное в base64 в переменной JavaScript:

[EDIT] Мне нужно сохранить этот файл на диск, не прося посетителя сделать правый клик [/ EDIT]

Возможно ли это? Как?

Заранее спасибо

С наилучшими пожеланиями

Ответы [ 9 ]

34 голосов
/ 01 января 2013

Я знаю, что этому вопросу уже 2 года, но, надеюсь, люди увидят это обновление.

Вы можете предложить пользователю сохранить изображение в строке base64 (а также задать имя файла), не спрашиваяпользователь должен сделать щелчок правой кнопкой мыши 

var download = document.createElement('a');
download.href = dataURI;
download.download = filename;
download.click();

Пример: 

var download = document.createElement('a');
download.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
download.download = 'reddot.png';
download.click();

Чтобы вызвать событие щелчка с помощью Firefox, вам нужно выполнить то, что объясненов этот так ответ .В основном: 

function fireEvent(obj,evt){
  var fireOnThis = obj;
  if(document.createEvent ) {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent( evt, true, false );
    fireOnThis.dispatchEvent( evObj );
  } else if( document.createEventObject ) {
    var evObj = document.createEventObject();
    fireOnThis.fireEvent( 'on' + evt, evObj );
  }
}
fireEvent(download, 'click')

По состоянию на 20.03.2013, единственным браузером, который полностью поддерживает атрибут download, является Chrome. Проверьте таблицу совместимости здесь

6 голосов
/ 11 октября 2010

... ничего не спрашивая у посетителя ... Возможно ли это?

Нет, это была бы дыра в безопасности. Если бы это было возможно, можно было бы без проблем записать вредоносное ПО на диск конечного пользователя. Ваша лучшая ставка может быть (подписана) Java-апплет . Правда, подписать его стоит $$$ (чтобы не выдавались предупреждения безопасности), но он может записывать данные на диск пользователя без его разрешения.

5 голосов
/ 19 марта 2013

Я удивлен, что никто не упомянул здесь использование блобов HTML5 вместе с парочкой хороших библиотек.

Сначала вам нужно https://github.com/eligrey/FileSaver.js/ и https://github.com/blueimp/JavaScript-Canvas-to-Blob.

Затем вы можете загрузитьизображение в холст 

base_image = new Image();
base_image.src ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

холст в BLOB-объект 

var canvas = document.getElementById('YourCanvas');
context = canvas.getContext('2d');
// Draw image within
context.drawImage(base_image, 0,0);

и, наконец, его сохранение 

x_canvas.toBlob(function(blob) {
saveAs(blob, "screenshot.png");
}, "image/png");

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

Проверьте это: http://jsfiddle.net/khhmm/9/

РЕДАКТИРОВАТЬ: это несовместимо с Safari / Mac.

3 голосов
/ 11 октября 2010

Как уже говорилось в других ответах, вы не можете сделать это только с помощью JavaScript. Если вы хотите, вы можете отправить данные (используя обычный HTTP POST) в скрипт PHP, вызвать header('Content-type: image/png') и вывести данные декодированного изображения на страницу, используя echo base64_decode($base64data).

Это будет работать так же, как если бы пользователь щелкнул изображение и открыл его или попросил его сохранить файл на диск (обычный диалог сохранения файла браузера).

2 голосов
/ 11 октября 2010

Это невозможно.

Если бы это было так, браузеры были бы крайне небезопасными, поскольку могли бы записывать случайные данные на ваш жесткий диск без вмешательства пользователя.

1 голос
/ 11 октября 2010

с JavaScript, вы не можете.единственная реальная возможность, о которой я могу подумать, - это java-апплет, но, возможно, (я не знаю, как долго должно сохраняться это изображение), вы могли бы просто добавить img-тег с вашим png и принудительное кэширование (но если пользователь удалит свой кеш, изображение исчезнет).

0 голосов
/ 12 сентября 2016

Вы можете сделать этот файл как blob на сервере и использовать функцию setTimeout для запуска загрузки.

0 голосов
/ 14 июля 2011

Я думаю, что вы можете сделать это что-то (возможно, не только с помощью javascript ... необходимо программирование xul).Существуют дополнения Firefox, которые сохраняют изображения в папку (см. Сайт дополнений Firefox)

0 голосов
/ 11 октября 2010

Я думаю, что это возможно с JavaScript, если вы используете ActiveX.

Другая возможность - заставить сервер выплевывать этот файл с другим типом mime, чтобы браузер попросил пользователя сохранить его.

...