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

HTMLCanvasElement.toDataURL()

[_] [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]

toDataURL()
toDataURL(type)
toDataURL(type, encoderOptions)

Przykłady:

<script>

 window.onload = () => {

 const szer = 400;
 const wys = 200;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys;

 const dataURL = canvas.toDataURL();
 console.log(dataURL);

 const dataURLFull = canvas.toDataURL("image/jpeg", 1.0);
 console.log(dataURLFull);
 const dataURLMedium = canvas.toDataURL("image/jpeg", 0.5);
 console.log(dataURLMedium);
 const dataURLLow = canvas.toDataURL("image/jpeg", 0.1);
 console.log(dataURLLow);
 
 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",
 );
 
 function kolorDom() {
    this.style.display = "none";
    this.nextSibling.style.display = "inline";
 }

 function bezkolorDom() {
    this.previousSibling.style.display = "inline";
    this.style.display = "none";
 }

 function zadanie2() {
    const foto = document.getElementsByClassName("obraz");
    const canvasA = document.createElement("canvas");
    const ctx2 = canvasA.getContext("2d");

    for (const kolorFoto of foto) {
       const width = kolorFoto.offsetWidth;
       const height = kolorFoto.offsetHeight;
       canvasA.width = width;
       canvasA.height = height;
       ctx2.drawImage(kolorFoto, 0, 0);
       const daneObrazu = ctx2.getImageData(0, 0, width, height);
       const pix = daneObrazu.data;
       const pixLen = pix.length;
       for (let pixel = 0; pixel < pixLen; pixel += 4) {
          pix[pixel + 2] = pix[pixel + 1] = pix[pixel] = (pix[pixel] + pix[pixel + 1] + pix[pixel + 2]) / 3;
       }
       ctx2.putImageData(daneObrazu, 0, 0);
 
       const bezKolor = new Image();
       bezKolor.src = canvasA.toDataURL();
       bezKolor.onmouseover = kolorDom;
       kolorFoto.onmouseout = bezkolorDom;
       ctx2.clearRect(0, 0, width, height);
       kolorFoto.style.display = "none";
       kolorFoto.parentNode.insertBefore(bezKolor, kolorFoto);
    }
 }

 zadanie2();

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>
<img class="obraz" src="/dom.png" alt="Dom" />

Opis:
Metoda HTMLCanvasElement.toDataURL() zwraca adres URL danych zawierający reprezentację obrazu w formacie określonym przez parametr type. 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. Innymi słowy, jeśli zwracana wartość zaczyna się od data:image/png dla dowolnego innego żądania type, wówczas ten format nie jest obsługiwany. Przeglądarki są wymagane do obsługi image/png; wiele z nich będzie obsługiwać dodatkowe formaty, w tym image/jpeg i image/webp. Utworzone dane obrazu będą miały rozdzielczość 96 dpi dla formatów plików obsługujących metadane rozdzielczości kodowania. Parametry type - opcjonalny, ciąg wskazujący format obrazu. Domyślny typ to image/png; ten format obrazu będzie również używany, jeśli określony typ nie jest obsługiwany. encoderOptions - 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ą image/jpeg 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 ciąg zawierający żądany URL danych. Jeśli wysokość lub szerokość płótna jest 0 lub większa niż maksymalny rozmiar płótna, zwracany jest ciąg znaków "data:,". Wyjątki SecurityError - Mapa bitowa obszaru roboczego nie jest czysta; 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ż: