GPUQueue: copyExternalImageToTexture() method

Cú pháp

copyExternalImageToTexture(source, destination, copySize)

Tham số

source

Một đối tượng đại diện cho nguồn cần ghi vào đích, và gốc của nó. Có thể có các thuộc tính sau:

source

Đối tượng cung cấp nguồn của ảnh chụp cần sao chép. Có thể là HTMLCanvasElement, HTMLImageElement, HTMLVideoElement, ImageBitmap, ImageData, OffscreenCanvas, hoặc VideoFrame.

origin Optional

Gốc của việc sao chép, tức là góc trên bên trái của vùng nguồn phụ cần sao chép từ đó. Mặc định là 0.

flipY Optional

Giá trị boolean. Nếu đặt là true, ảnh chụp bị lật dọc. Nếu bỏ qua, flipY mặc định là false.

destination

Một đối tượng xác định subresource texture và gốc để ghi ảnh chụp vào, cùng metadata mã hóa.

copySize

Một đối tượng hoặc mảng chỉ định width, height, và depthOrArrayLayers của vùng cần sao chép từ/đến.

Giá trị trả về

Không có (Undefined).

Ngoại lệ

OperationError DOMException

Được ném ra nếu các tiêu chí nhất định không được đáp ứng.

SecurityError DOMException

Được ném ra nếu dữ liệu ảnh nguồn có nguồn gốc chéo (cross-origin).

Ví dụ

Trong WebGPU Samples Textured Cube example, đoạn mã sau được dùng để tải một ảnh và tải lên GPUTexture:

let cubeTexture;
{
  const img = document.createElement("img");
  img.src = new URL(
    "../../../assets/img/Di-3d.png",
    import.meta.url,
  ).toString();
  await img.decode();
  const imageBitmap = await createImageBitmap(img);

  cubeTexture = device.createTexture({
    size: [imageBitmap.width, imageBitmap.height, 1],
    format: "rgba8unorm",
    usage:
      GPUTextureUsage.TEXTURE_BINDING |
      GPUTextureUsage.COPY_DST |
      GPUTextureUsage.RENDER_ATTACHMENT,
  });

  device.queue.copyExternalImageToTexture(
    { source: imageBitmap },
    { texture: cubeTexture },
    [imageBitmap.width, imageBitmap.height],
  );
}

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• WebGPU API