我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

The CanvasRenderingContext2D.createImageData() method of the Canvas 2D API creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.


ImageData ctx.createImageData(width, height);
ImageData ctx.createImageData(imagedata);


The width to give the new ImageData object.
The height to give the new ImageData object.
An existing ImageData object from which to copy the width and height. The image itself is not copied.

Return value

A new ImageData object with the specified width and height. The new object is filled with transparent black pixels.

Errors thrown

Thrown if either of the width or height arguments are zero.


Using the createImageData method

This is just a simple code snippet which uses the createImageData method. For more information, see Pixel manipulation with canvas and the ImageData object.


<canvas id="canvas"></canvas>


var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);

console.log(ctx.createImageData(100, 100)); 
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }


Specification Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.createImageData' in that specification.
Living Standard  

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes


Full support  
Full support

Compatibility notes

  • Starting with (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2):
    • createImageData() now correctly return at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.
    • Specifying non-finite values when calling createImageData() now properly throws a NOT_SUPPORTED_ERR exception.
    • createImageData() now handle negative arguments in accordance with the specification, by flipping the rectangle around the appropriate axis.

See also


此頁面的貢獻者: danzen, fscholz, jpmedley, nmve, erikadoyle
最近更新: danzen,