HTML5 Canvas для PNG файла

Я пытаюсь преобразовать холст HTML5 в изображение. Это то, что я получил до сих пор:

var tmp_canvas = document.getElementById('canvas');
var dataURL = tmp_canvas.toDataURL("image/png");
$('#thumbnail_list').append($('<img/>', { src : dataURL }).addClass('image'));

но проблема в том, что я получаю этот код:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt+XCAAAgAElEQVR4nNS6Z1xVaZbvv/c+CVOZc6mYEMlJMZRizgljGRARs6AgOSMGQATBSM5ZyTkoOQkSzJWrp3t6etLt6Z7pmf/c++L7f3EOiBZW2dM9dz73xfdzztl7n3Oe/Txrrd9a69mCTC4gkwvIZAKSTECUBARRQBA+jii+46f.......class="image">

Я хочу нормальный путь к изображению, который пользователь может загрузить!

Любая помощь?

Ответ 1

Информация: IE10 + вообще не поддерживает метод ниже. Другие люди уже выполнили работу и реализовали кросс-браузерные решения. Это является одним из них.

Сначала добавьте сгенерированный URL-адрес данных в атрибут href тега <a>. Однако в некоторых браузерах это само по себе не приведет к загрузке. Вместо этого он откроет связанное изображение на новой странице.

Диалог загрузки для изображения base64:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...." class="image" />

В соответствии с приведенным выше примером преобразуйте MIME-тип URL-адреса данных в это:

<a href="data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUg....">Download</a>

Сообщая браузеру, что данные application/octet-stream, он попросит вас сохранить его на вашем жестком диске.

Указание имени файла:

Как Adi в комментариях ниже, нет стандартного способа определить имя файла, используя этот метод. Но есть два подхода, которые могут работать в некоторых браузерах.

A) Атрибут download, введенный Google Crome

<a download="image.png" href="...">

B) Определение заголовков HTTP в URL-адресе данных
headers=Content-Disposition: attachment; filename=image.png

<a href="data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=image.png;base64,iVBORw0KGgoAAAA">

Это работало, по крайней мере, в некоторых более старых версиях Opera. Здесь обсуждается это.

Взгляд в системы Bug/Feature-Tracking основных браузеров показывает, что определение имени файла является довольно большим пожеланием сообщества. Возможно, в ближайшем будущем мы увидим совместимое с кросс-браузером решение!;)

Сохранить операционные ресурсы и ресурсы процессора:

Если вы не хотите раздувать ОЗУ вашего браузера посетителя, вы также можете динамически генерировать URL-адрес данных:

<a id="dl" download="Canvas.png">Download Canvas</a>

function dlCanvas() {
    var dt = canvas.toDataURL('image/png');
    this.href = dt;
};
dl.addEventListener('click', dlCanvas, false);

Таким образом, ваш холст все еще может отображаться в виде файла изображения вашим браузером. Если вы хотите увеличить вероятность открытия диалогового окна загрузки, вы должны расширить функцию выше, чтобы она заменила, как показано выше:

function dlCanvas() {
    var dt = canvas.toDataURL('image/png');
    this.href = dt.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
};
dl.addEventListener('click', dlCanvas, false);

Наконец, добавьте заголовок HTTP, чтобы убедиться, что большинство браузеров предлагают вам действительное имя файла!;)

ПОЛНЫЙ ПРИМЕР:

var canvas = document.getElementById("cnv");
var ctx = canvas.getContext("2d");

/* FILL CANVAS WITH IMAGE DATA */
function r(ctx, x, y, w, h, c) {
  ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.strokeStyle = c;
  ctx.stroke();
}
r(ctx, 0, 0, 32, 32, "black");
r(ctx, 4, 4, 16, 16, "red");
r(ctx, 8, 8, 16, 16, "green");
r(ctx, 12, 12, 16, 16, "blue");

/* REGISTER DOWNLOAD HANDLER */
/* Only convert the canvas to Data URL when the user clicks. 
   This saves RAM and CPU ressources in case this feature is not required. */
function dlCanvas() {
  var dt = canvas.toDataURL('image/png');
  /* Change MIME type to trick the browser to downlaod the file instead of displaying it */
  dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');

  /* In addition to <a> "download" attribute, you can define HTTP-style headers */
  dt = dt.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png');

  this.href = dt;
};
document.getElementById("dl").addEventListener('click', dlCanvas, false);

<canvas id="cnv" width="32" height="32"></canvas>
<a id="dl" download="Canvas.png" href="#">Download Canvas</a>

Ответ 2

У вас есть 2 варианта (оба работают почти во всех браузерах):

1- ПОСЛАТЬ данные на сервер:
На сервере у вас будет script, который будет обрабатывать данные, а затем сообщит браузеру, чтобы он запрашивал пользователя для загрузки.

header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=something.png");
header("Content-Type: image/png");
echo base64_decode($_POST['imageData']);
exit;

2- Запросить пользователя для загрузки с помощью Downloadify

<div id="clickMe"></div>

Downloadify.create( 'clickMe', {
   data: base64String,
   dataType: 'base64',
   filename: 'something.png'
});

Ответ 3

Вы можете использовать библиотеку reimg для преобразования холста в объект изображения и даже запускать загрузку для пользователя.

После того, как вы вставляете библиотеку на свою страницу, просто используйте это: ReImg.fromCanvas(yourCanvasElement).downloadPng()

Ответ 4

Вы также можете использовать Concrete.js http://www.concretejs.com, который представляет собой небольшую платформу Canvas HTML5, которая позволяет такие периферийные вещи, как это, включая загрузки. Вы просто сделали бы это:

canvas.download({
  fileName: 'my-file.png'
});

и все готово.