We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

self.createImageBitmap()

这篇翻译不完整。请帮忙从英语翻译这篇文章

createImageBitmap 方法存在 windows 和 workers 中. 它接受各种不同的图像来源, 并返回一个Promise, resolve为ImageBitmap. 可选地参数,图像被剪裁成自(sx,sy)且宽度为sw,高度为sh的像素的矩形。

Syntax

createImageBitmap(image[, options]).then(function(response) { ... });
createImageBitmap(image, sx, sy, sw, sh[, options]).then(function(response) { ... });

Parameters

image
一个图像源, 可以是一个 <img>, SVG <image>, <video>, <canvas>, HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElementBlob, ImageData, ImageBitmap, 或 OffscreenCanvas 对象.
sx
裁剪点x坐标.
sy
裁剪点y坐标.
sw
裁剪宽度,值可为负数.
sh
裁剪高度,值可为负数.
options 可选
为其设置选项的对象。可用的选项是:
  • imageOrientation: 指示图像是按原样呈现还是垂直翻转.  none (默认不翻转) 或 flipY.
  • premultiplyAlpha: 指示位图颜色通道由alpha通道预乘. 选择其一:none, premultiply, 或 default (默认).
  • colorSpaceConversion: 指示图像是否使用色彩空间转换进行解码. none 或 default (默认). The value default indicates that implementation-specific behavior is used.
  • resizeWidth: 指示新宽度的长整数。
  • resizeHeight: 指示新高度的长整数。
  • resizeQuality: 指定图像缩放算法. 选择其一pixelated, low (默认), medium, 或 high.

Return value

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

Example

var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
image = new Image();

image.onload = function() {
  Promise.all([
    createImageBitmap(this, 0, 0, 32, 32),
    createImageBitmap(this, 32, 0, 32, 32)
  ]).then(function(sprites) {
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
  });
}

image.src = 'sprites.png';

Specifications

Specification Status Comment
HTML Living Standard
createImageBitmap
Living Standard  

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Basic support 50

42 (42)
52 (52)[1]

未实现 未实现 (Yes) 未实现
options parameter 52 ? 未实现 未实现 39 未实现
resizeWidth, resizeHeight, and resizeQuality 54 ? 未实现 未实现 ? 未实现
SVGImageElement as source image 59 ? 未实现 未实现 ? 未实现
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 50 50

42.0 (42)
52.0 (52)[1]

? (Yes) ?
options parameter 52 52 ? ? 39 ?
resizeWidth, resizeHeight, and resizeQuality 54 ? ? ? ?  
SVGImageElement as source image 59 59 ? ? ? ?

[1] createImageBitmap() now defined on WindowOrWorkerGlobalScope mixin.

See also

文档标签和贡献者

此页面的贡献者: varcat
最后编辑者: varcat,