logo

Jak uložit HTML plátno jako obrázek

Canvas nám poskytuje velkou flexibilitu při vytváření skvělé grafiky generované kódem a někdy je potřebujeme stáhnout jako obrázky. Naštěstí je to s HTML canvasem docela snadné. Zde je příklad, kdy kliknutím na tlačítko stáhnete plátno jako obrázek:

Podívejme se, jak to funguje.

Stažení plátna jako obrázku

Ve výše uvedeném příkladu jsme vytvořili obraz na plátně a tlačítko, na které jej můžete kliknutím stáhnout. Toto tlačítko používá toDataURL() převést naše plátno na datový řetězec adresy URL obrázku. Když na něj klikneme, získáme naše původní plátno a poté vytvoříme kotvu, abychom si jej okamžitě stáhli:

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

// Canvas code goes here 
// ...

document.getElementById('download').addEventListener('click', function(e) {
    // Convert our canvas to a data URL
    let canvasUrl = canvas.toDataURL();
    // Create an anchor, and set the href value to our data URL
    const createEl = document.createElement('a');
    createEl.href = canvasUrl;

    // This is the name of our downloaded file
    createEl.download = "download-this-canvas";

    // Click the download button, causing a download, and then remove it
    createEl.click();
    createEl.remove();
});

Javascript trochu bojuje s nativním stahováním, takže místo toho emulujeme kliknutí na odkaz. Uděláme to tak, že vytvoříme kotvu pomocí createElement a poté na ni klikneme pomocí click(). Tím se dosáhne stejného výsledku.

Klíčová věc, kterou si zapamatujte, je použít toDataURL, která zakóduje naše obrazová data jako řetězec, který lze snadno stáhnout.

Jak toDataURL() funguje

toDataURL() převede prvek plátna na dlouhý řetězec kódování obrázku. Podívejme se na náš příklad:

// Convert our canvas to a data URL
let canvasUrl = canvas.toDataURL();
console.log(canvasUrl);
// Outputs 
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABRQAAANSCAYAAAAUN0KjAAAAAXNSR0IArs4c6QAAIABJREFUeF7sfVuSJLeOrNrsaP/7GM227pmZVehaZTxIgni...

Ve výchozím nastavení toDataURL() vytvoří obrázek png. Ale naštěstí má možnosti, jak to změnit, pokud budeme chtít.

Ukládání obrázků z plátna jako jiné formáty

toDataURL(type, encoderOptions) má dva argumenty, které nám umožňují změnit způsob kódování plátna. To nám umožňuje ukládat soubory v jiných formátech, jako je jpg.

Tyto dva argumenty lze definovat následovně:

  • type , což je typ souboru, ve formátu image/png.
  • encoderOptions , což je číslo mezi 0 a 1, definující kvalitu obrazu. Toto podporují pouze formáty souborů, které mají ztrátovou kompresi, jako je webp nebo jpg.

Pokud bychom například chtěli uložit náš obrázek jako .jpg s kvalitou 59 %, mohli bychom napsat následující:

// Convert our canvas to a data URL
let canvasUrl = canvas.toDataURL("image/jpeg", 0.5);
console.log(canvasUrl);
// Outputs 
// "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAA...

Ve výchozím nastavení všechny prohlížeče podporují obrázek/png. Jiné formáty, jako image/jpeg a image/webp jsou široce podporovány. Podpora na image/webp naleznete zde.

Závěr

Ukládání prvků plátna jako obrázků je jednoduché a spoléhá se pouze na toDataURL. Pokud se chcete dozvědět o ukládání obrazů na plátně v reálném prostředí na backendu, můžete si přečíst můj tutoriál o tom zde.