在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap .

句法

const imageBitmapPromise = createImageBitmap(image[, options]);
const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);
					

参数

image

An image source, which can be an <img> , SVG <image> , <video> , <canvas> , HTMLImageElement , SVGImageElement , HTMLVideoElement , HTMLCanvasElement , Blob , ImageData , ImageBitmap ，或 OffscreenCanvas 对象。

sx

The x coordinate of the reference point of the rectangle from which the ImageBitmap will be extracted.

sy

The y coordinate of the reference point of the rectangle from which the ImageBitmap will be extracted.

sw

The width of the rectangle from which the ImageBitmap will be extracted. This value can be negative.

sh

The height of the rectangle from which the ImageBitmap will be extracted. This value can be negative.

选项 可选

An object that sets options for the image's extraction. The available options are:

• imageOrientation : Specifies whether the image should be presented as is or flipped vertically. Either none (默认) 或 flipY .
• premultiplyAlpha : Specifies whether the bitmap's color channels should be premultiplied by the alpha channel. One of none , premultiply ，或 default (default).
• colorSpaceConversion : Specifies whether the image should be decoded using color space conversion. Either none or default (default). The value default indicates that implementation-specific behavior is used.
• resizeWidth : A long integer that indicates the output width.
• resizeHeight : A long integer that indicates the output height.
• resizeQuality : Specifies the algorithm to be used for resizing the input to match the output dimensions. One of pixelated , low (默认)， medium ，或 high .

返回值

A Promise which resolves to an ImageBitmap object containing bitmap data from the given rectangle.

范例

Creating sprites from a sprite sheet

This example loads a sprite sheet, extracts individual sprites, and then renders each sprite to the canvas. A sprite sheet is an image containing multiple smaller images, each of which you want to be able to render separately.

var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
image = new Image();
// Wait for the sprite sheet to load
image.onload = function() {
  Promise.all([
    // Cut out two sprites from the sprite sheet
    createImageBitmap(image, 0, 0, 32, 32),
    createImageBitmap(image, 32, 0, 32, 32)
  ]).then(function(sprites) {
    // Draw each sprite onto the canvas
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
  });
}
// Load the sprite sheet from an image file
image.src = 'sprites.png';
					

规范

规范	状态	注释
HTML 实时标准 The definition of 'createImageBitmap' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
createImageBitmap	Chrome 50	Edge 79	Firefox 52 52 createImageBitmap() now defined on WindowOrWorkerGlobalScope 混合。 42	IE No	Opera Yes	Safari No	WebView Android 50	Chrome Android 50	Firefox Android Yes	Opera Android Yes	Safari iOS ?	Samsung Internet Android 5.0
选项 参数	Chrome 52	Edge 79	Firefox No	IE No	Opera 39	Safari No	WebView Android 52	Chrome Android 52	Firefox Android No	Opera Android 41	Safari iOS ?	Samsung Internet Android 6.0
resizeWidth , resizeHeight ，和 resizeQuality	Chrome 54	Edge 79	Firefox No	IE No	Opera Yes	Safari No	WebView Android 54	Chrome Android 54	Firefox Android No	Opera Android Yes	Safari iOS ?	Samsung Internet Android 6.0
SVGImageElement as source image	Chrome 59	Edge 79	Firefox 65	IE No	Opera Yes	Safari No	WebView Android 59	Chrome Android 59	Firefox Android 65	Opera Android Yes	Safari iOS ?	Samsung Internet Android 7.0

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

见实现注意事项。

另请参阅

• CanvasRenderingContext2D.drawImage()
• ImageData

元数据

• 最后修改： Aug 27, 2019

相关话题

1. 画布 API
2. WindowOrWorkerGlobalScope
3. 特性

   1. caches
   2. crossOriginIsolated
   3. indexedDB
   4. isSecureContext
   5. origin
4. 方法

   1. atob()
   2. btoa()
   3. clearInterval()
   4. clearTimeout()
   5. createImageBitmap()
   6. fetch()
   7. queueMicrotask()
   8. setInterval()
   9. setTimeout()
5. 实现通过：

   1. Window
   2. WorkerGlobalScope
6. Related pages for Canvas API

   1. Canvas
   2. CanvasGradient
   3. CanvasImageSource
   4. CanvasPattern
   5. CanvasRenderingContext2D
   6. HTMLCanvasElement
   7. ImageBitmap
   8. ImageBitmapFactories
   9. ImageBitmapRenderingContext
   10. ImageData
   11. OffscreenCanvas
   12. Path2D
   13. RenderingContext
   14. TextMetrics