[ Leksykon ] [ JavaScript ] [ Metody ] [ canvas ]

createImageBitmap()

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

createImageBitmap(image)
createImageBitmap(image, options)
createImageBitmap(image, sx, sy, sw, sh)
createImageBitmap(image, sx, sy, sw, sh, options)

Przykłady: 

<script>

 window.onload = () => {

 const canvas = document.getElementById("canvas"),
 ctx = canvas.getContext("2d"),
 image = new Image();
 image.src = "dom.jpg";

 image.onload = () => {
 Promise.all([
 // Wytnij dwa obrazy z arkusza obrazu
 createImageBitmap(image, 0, 0, 50, 50),
 createImageBitmap(image, 50, 0, 50, 50),
 createImageBitmap(image, 100, 100, 50, 50),
 ]).then((obraz) => {
 // Narysuj każdy obraz na canvas
 ctx.drawImage(obraz[0], 100, 100);
 ctx.drawImage(obraz[1], 250, 250);
 ctx.drawImage(obraz[2], 0, 0);
 });
 };

 return;

 };

</script>

<canvas id="canvas" width="500" height="300"></canvas>

<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 globalna createImageBitmap() tworzy bitmapę z danego źródła, opcjonalnie przyciętą tak, aby zawierała tylko część tego źródła. Ta funkcja jest dostępna w Web Workers. Metoda istnieje w zasięgu globalnym zarówno w oknach, jak i w procesach roboczych. Akceptuje wiele różnych źródeł obrazów i zwraca Promise(), które przekształca się w ImageBitmap(). Parametry image - źródło obrazu, którym może być dowolne z poniższych:

HTMLImageElement - 
SVGImageElement - 
HTMLVideoElement - 
HTMLCanvasElement() - Interfejs do manipulowania i prezentacją elementów HTML <canvas>
Blob - 
ImageData - 
ImageBitmap() - reprezentuje obraz bitmapowy, który można narysować canvas bez zbędnych opóźnień
OffscreenCanvas - 

Parametry kolejne: sx - współrzędna x punktu odniesienia prostokąta, z którego ImageBitmap zostanie wyodrębniony, sy - współrzędna y punktu odniesienia prostokąta, z którego ImageBitmap zostanie wyodrębniony, sw - szerokość prostokąta, z którego ImageBitmap zostanie wyodrębniony, wartość ta może być ujemna, sh - wysokość prostokąta, z którego ImageBitmap zostanie wyodrębniony, wartość ta może być ujemna, options - obiekt Opcjonalny! ustawiający opcje wyodrębniania obrazu.

Dostępne opcje to:
imageOrientation - określa, czy obraz powinien być prezentowany w niezmienionej postaci, czy odwrócony w pionie, none - domyślnie albo flipY.
premultiplyAlpha - określa, czy kanały kolorów mapy bitowej powinny być wstępnie pomnożone przez kanał alfa. Jeden z none, premultiply, lub default domyślnie.
colorSpaceConversion - określa, czy obraz powinien być dekodowany przy użyciu konwersji przestrzeni kolorów. none albo default domyślnie. Wartość default wskazuje, że używane jest zachowanie specyficzne dla implementacji,
resizeWidth - długa liczba całkowita wskazująca szerokość wyjściową,
resizeHeight - długa liczba całkowita wskazująca wysokość wyjściową,
resizeQuality - określa algorytm używany do zmiany rozmiaru danych wejściowych w celu dopasowania ich do wymiarów wyjściowych. Jeden z pixelated, low domyślnie, medium lub high.

Wartość zwracana Promise(), który przekształca się w ImageBitmap() obiekt zawierający dane bitmapowe z danego prostokąta.

Zobacz też:
HTMLImageElement - 
SVGImageElement - 
HTMLVideoElement - 
HTMLCanvasElement() - Interfejs do manipulowania i prezentacją elementów HTML <canvas>
Blob - 
ImageData - 
ImageBitmap() - reprezentuje obraz bitmapowy, który można narysować canvas bez zbędnych opóźnień
OffscreenCanvas - 
Web Workers -