[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ HTMLCanvasElement() ]

HTMLCanvasElement.toBlob()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

toBlob(callback)
toBlob(callback, type)
toBlob(callback, type, quality)

Przykłady:

<script>

 window.onload = () => {

 const szer = 400;
 const wys = 200;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 
 console.log(canvas.width);
 
 const ctx = canvas.getContext("2d");
 console.log(ctx);

 ctx.fillStyle = "blue";
 ctx.fillRect(100, 100, 80, 90);
 
 canvas.toBlob((blob) => {
 const obraz = document.createElement("img");
 const url = URL.createObjectURL(blob);

 obraz.onload = () => {
 URL.revokeObjectURL(url);
 };

 obraz.src = url;
 document.body.appendChild(obraz);
 });
 
 canvas.toBlob((blob) => {
 const obraz = document.createElement("img");
 const url = URL.createObjectURL(blob);

 obraz.onload = () => {
 URL.revokeObjectURL(url);
 };

 obraz.src = url;
 document.body.appendChild(obraz);
 },
 "image/jpeg",
 0.90,);

 function zadanie(nazwa) {
 return (callback) => {
 const a = document.createElement("a");
 a.textContent = "plik";
 document.body.appendChild(a);
 a.style.display = "block";
 a.download = `${nazwa}.ico`;
 a.href = window.URL.createObjectURL(callback);
 };
 }

 canvas.toBlob(
 zadanie("ikona"),
 "image/icon",
 );

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>

Opis:
Metoda HTMLCanvasElement.toBlob() tworzy obiekt Blob reprezentujący obraz zawarty w kanwie. Plik ten może być buforowany na dysku lub przechowywany w pamięci, według uznania klienta użytkownika. Można określić żądany format pliku i jakość obrazu. Jeżeli format pliku nie zostanie określony lub dany format nie jest obsługiwany, dane zostaną wyeksportowane jako image/png. Przeglądarki muszą obsługiwać image/png; wiele z nich obsługuje dodatkowe formaty, w tym image/jpeg i image/webp. Utworzony obraz będzie miał rozdzielczość 96 dpi dla formatów plików obsługujących metadane rozdzielczości kodowania. Parametry callback - funkcja wywołania zwrotnego z wynikowym obiektem Blob jako pojedynczym argumentem. null może zostać przekazany, jeśli z jakiegoś powodu nie można utworzyć obrazu. type - opcjonalny, ciąg wskazujący format obrazu. Domyślny typ to image/png; ten typ jest również używany, jeśli dany typ nie jest obsługiwany (image/png, image/jpeg, image/webp). quality - opcjonalny, Number pomiędzy 0 a 1 wskazuje jakość obrazu, jaka ma być używana podczas tworzenia obrazów przy użyciu formatów plików obsługujących kompresję stratną (np. image/jpeg lub image/webp). Klient użytkownika użyje domyślnej wartości jakości, jeśli ta opcja nie zostanie określona lub jeśli liczba będzie poza dozwolonym zakresem. Wartość zwracana undefined. Wyjątki SecurityError - mapa bitowa płótna nie jest czysta w oryginale; przynajmniej część jego zawartości została lub mogła zostać załadowana z witryny innej niż ta, z której załadowano sam dokument.

Zobacz też: