HTML5 Canvas do pliku PNG

Info: IE10+ w ogóle nie obsługuje poniższej metody. Inni ludzie już wykonali pracę i wdrożyli rozwiązania cross browser. Ten jest jednym z nich.

Najpierw dodaj wygenerowany adres URL do atrybutu href znacznika <a>. Jednak w niektórych przeglądarkach samo to nie spowoduje pobrania. Zamiast tego otworzy połączony obraz na nowej stronie.

Okno dialogowe pobierania obrazu base64:

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

Na podstawie powyższego przykład, Konwertuj typ MIME adresu URL danych na ten:

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

Informując przeglądarkę, że dane są application/octet-stream, poprosi Cię o zapisanie ich na dysku twardym.

Jak Adi powiedział w komentarzach poniżej, nie ma standardowego sposobu zdefiniowania nazwy pliku za pomocą tej metody. Ale istnieją dwa podejścia, które mogą działać w niektórych przeglądarkach.

A) atrybut download wprowadzony przez Google Crome

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

B) Definiowanie nagłówków HTTP w adresie URL danych
headers=Content-Disposition: attachment; filename=image.png

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

Przeglądanie systemów śledzenia błędów / funkcji w głównych przeglądarkach pokazuje, że definiowanie nazwy pliku jest dość dużym życzeniem społeczności. Być może w niedalekiej przyszłości zobaczymy rozwiązanie kompatybilne z wieloma przeglądarkami! ;)

Jeśli nie chcesz nadmuchać pamięci RAM przeglądarki odwiedzającego, możesz również dynamicznie wygenerować adres URL danych:

<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);

W ten sposób płótno może być nadal wyświetlane jako plik obrazu przez przeglądarkę. Jeśli chcesz zwiększyć prawdopodobieństwo otwarcia okna dialogowego pobierania, powinieneś rozszerzyć powyższą funkcję, aby wykonała zastąpienie, jak pokazano powyżej:

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

Na koniec dodaj nagłówek HTTP, aby upewnić się, że większość przeglądarek oferuje poprawną nazwę pliku za Ciebie! ;)

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>'s "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>