Window: createImageBitmap() 方法
Baseline 廣泛可用 *
Window 介面的 createImageBitmap() 方法從給定源建立點陣圖，可以選擇裁剪以僅包含該源的一部分。它接受各種不同的影像源，並返回一個解析為 ImageBitmap 的 Promise。
語法
js
createImageBitmap(image)
createImageBitmap(image, options)
createImageBitmap(image, sx, sy, sw, sh)
createImageBitmap(image, sx, sy, sw, sh, options)
引數
圖片-
影像源，可以是以下任何一種
sx-
將從中提取
ImageBitmap的矩形的參考點的 x 座標。 sy-
將從中提取
ImageBitmap的矩形的參考點的 y 座標。 sw-
將從中提取
ImageBitmap的矩形的寬度。此值可以為負數。 sh-
將從中提取
ImageBitmap的矩形的高度。此值可以為負數。 options可選-
一個為影像提取設定選項的物件。可用選項有
imageOrientation-
指定點陣圖影像的朝向。
from-image-
影像根據 EXIF 方向元資料進行定向，如果存在（預設）。
flipY-
影像根據 EXIF 方向元資料進行定向，如果存在，然後垂直翻轉。
none-
影像根據影像編碼進行定向，忽略任何關於方向的元資料（例如 EXIF 元資料，它可能會新增到影像中以指示相機被側向轉動以在肖像模式下捕獲影像）。
premultiplyAlpha-
指定點陣圖的顏色通道是否應由 Alpha 通道預乘。可以是
none、premultiply或default（預設）。 colorSpaceConversion-
指定影像是否應使用顏色空間轉換進行解碼。可以是
none或default（預設）。值default表示使用實現特定的行為。 resizeWidth-
一個長整數，指示輸出寬度。
resizeHeight-
一個長整數，指示輸出高度。
resizeQuality-
指定用於調整輸入大小以匹配輸出尺寸的演算法。可以是
pixelated、low（預設）、medium或high。
返回值
一個 Promise，它解析為包含給定矩形點陣圖資料的 ImageBitmap 物件。
示例
從精靈表建立精靈
此示例載入一個精靈表，提取單個精靈，然後將每個精靈渲染到畫布。精靈表是包含多個較小影像的影像，您希望能夠單獨渲染每個影像。
js
const canvas = document.getElementById("myCanvas"),
ctx = canvas.getContext("2d"),
image = new Image();
// Wait for the sprite sheet to load
image.onload = () => {
Promise.all([
// Cut out two sprites from the sprite sheet
createImageBitmap(image, 0, 0, 32, 32),
createImageBitmap(image, 32, 0, 32, 32),
createImageBitmap(image, 0, 0, 50, 50, { imageOrientation: "flipY" }),
]).then((sprites) => {
// Draw each sprite onto the canvas
ctx.drawImage(sprites[0], 0, 0);
ctx.drawImage(sprites[1], 32, 32);
ctx.drawImage(sprites[2], 64, 64);
});
};
// Load the sprite sheet from an image file
image.src = "50x50.jpg";
規範
| 規範 |
|---|
| HTML # dom-createimagebitmap-dev |
瀏覽器相容性
載入中…