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

Ответ 1

Я знаю, что этот вопрос 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();

Чтобы инициировать событие click с использованием Firefox, вам нужно сделать то, что объяснено в этом SO-ответе. В принципе:

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. Проверьте таблицу совместимости здесь

Ответ 2

... не спрашивая посетителя, что-нибудь... Возможно ли это?

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

Ответ 3

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

Сначала вам нужно 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/

EDIT: это несовместимо с Safari/Mac.

Ответ 4

Вы не можете. Вы можете прочитать этот пост.

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

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