[ Leksykon ] [ JavaScript ] [ Metody ] [ canvas ] [ OffscreenCanvas() ]

OffscreenCanvas.transferToImageBitmap()

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

transferToImageBitmap()

Przykłady: 

<script>

 window.onload = () => {

 const szer = 300;
 const wys = 300;

 const canvas = document.getElementById("canvas").getContext("bitmaprenderer");
 canvas.width = szer;
 canvas.height = wys; 
 
 const canvasA = document.getElementById("canvasA");
 canvasA.width = szer;
 canvasA.height = wys; 
 const ctxA = canvasA.getContext("2d", { willReadFrequently: true,}); 

 const canvasB = document.getElementById("canvasB");
 canvasB.width = szer;
 canvasB.height = wys; 
 const ctxB = canvasB.getContext("2d", { willReadFrequently: true,}); 

 const canvasC = document.getElementById("canvasC");
 canvasC.width = szer;
 canvasC.height = wys; 
 const ctxC = canvasC.getContext("2d", { willReadFrequently: true,});

 // OffscreenCanvas
 const offscreen = new OffscreenCanvas(szer, wys);
 
 offscreen.width = 300;
 offscreen.height = 300;
 
 console.log(offscreen.width);
 console.log(offscreen.height);
 
 const ctxoff = offscreen.getContext("2d");

 var counter = 0;
 setInterval( function() {
 zadanieCanvas();
 counter++;
 }, 100);

 function zadanieCanvas() {

 ctxA.clearRect(0, 0, canvasA.width, canvasA.height);
 ctxB.clearRect(0, 0, canvasB.width, canvasB.height);
 ctxC.clearRect(0, 0, canvasB.width, canvasB.height);
 
 const obraz2 = ctxoff.createImageData(100, 100);
 for (let i = 0; i < obraz2.data.length; i += 4) { 
 let x = ((i % 400) / 400) * 255;
 let y = (Math.ceil(i / 400) / 100) * 255;

 obraz2.data[i + 0] = x; // R 
 obraz2.data[i + 1] = y; // G 
 obraz2.data[i + 2] = 255 - x; // B 
 obraz2.data[i + 3] = 255; // A 
 }

 ctxoff.putImageData(obraz2, 0 + counter, 0); 

 const arr = new Uint8ClampedArray(10_000);

 // Wypełnij tablicę wartościami RGBA
 for (let i = 0; i < arr.length; i += 4) {
 arr[i + 0] = 250; // R
 arr[i + 1] = 100; // G
 arr[i + 2] = 0; // B
 arr[i + 3] = 255; // A
 }

 // Zainicjuj nowy obiekt ImageData
 let obraz = new ImageData(arr, 50);
 // Narysuj dane obrazu na canvas
 ctxoff.putImageData(obraz, 0, 0 + counter);

 if (counter == 200)
 { 
 counter = 0;
 }
 
 const obrazX = offscreen.transferToImageBitmap(); // ImageBitmap

 Promise.all([
 // Wytnij obrazy z arkusza obrazu
 createImageBitmap(obrazX, 0, 0, 300, 300),
 ]).then((obraz) => {
 // Narysuj każdy obraz na canvas
 ctxA.drawImage(obraz[0], 0, 0);
 });

 ctxB.drawImage(obrazX, 0, 0);
 
 canvas.transferFromImageBitmap(obrazX);

 const imageData2 = ctxB.getImageData(0, 0, 300, 300, { colorSpace: "srgb" });
 ctxC.putImageData(imageData2, 0, 0);

 obrazX.close();
 ctxoff.clearRect(0, 0, offscreen.width, offscreen.height);

 }

 return;

 };

</script>

 <canvas id="canvas" width="100" height="100"></canvas>
 <canvas id="canvasA" width="100" height="100"></canvas>
 <canvas id="canvasB" width="100" height="100"></canvas>
 <canvas id="canvasC" width="100" height="100"></canvas>

Opis:
Metoda OffscreenCanvas.transferToImageBitmap() tworzy ImageBitmap obiekt na podstawie ostatnio wyrenderowanego obrazu pliku OffscreenCanvas. Przydziela OffscreenCanvas nowy obraz do późniejszego renderowania. Wartość zwracana nowo przydzielony ImageBitmap. Odnosi się to ImageBitmap do potencjalnie dużego zasobu graficznego i aby mieć pewność, że aplikacja internetowa pozostanie niezawodna, ważne jest, aby unikać przydzielania zbyt wielu z tych zasobów w dowolnym momencie. Z tego powodu ważne jest, aby upewnić się, że produkt ImageBitmap został użyty i zamknięty. Wiele internetowych interfejsów API, które akceptują, ImageBitmap akceptuje również OffscreenCanvas jako argument. Jeśli jest użyty transferToImageBitmap() i nie masz zamiaru przekazywać tego, zastanów się, czy w ogóle ImageBitmapRenderingContext.transferFromImageBitmap() musisz użyć.

Zobacz też:
ImageBitmap() - reprezentuje obraz bitmapowy, który można narysować canvas bez zbędnych opóźnień