mozilla

Revision 436647 of ImageData

  • Revision slug: Web/API/ImageData
  • Revision title: ImageData
  • Revision id: 436647
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{CanvasRef}}

The ImageData interface represents the underlying pixel data of an area of a {{HTMLElement("canvas")}} element. It is created using creators on the {{domxref("CanvasRenderingContext2D")}} object associated with the canvas (createImageData and getImageData). It can also be used to set a part of the canvas (like with putImageData).

Properties

width {{readonlyInline}}
Is an unsigned long representing the actual width, in pixels, of the ImageData.
height {{readonlyInline}}
Is an unsigned long representing the actual height, in pixels, of the ImageData.
resolution {{readonlyInline}} {{experimental_inline}}
Is a double representing the pixel density of the ImageData. It is used to ensure that a {{domxref("ImageBitmap")}} object generated from an ImageData has the right pixel density.
data {{readonlyInline}}
Is a Uint8ClampedArray representing a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 (included).

Methods

There is no specific method.

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}} {{Spec2('HTML WHATWG')}} Added the resolution property.
{{SpecName('HTML Canvas 2D Context W3C', '#imagedata', 'ImageData')}} {{Spec2('HTML Canvas 2D Context W3C')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 {{CompatGeckoDesktop("3.6")}} 9.0 9.0 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 {{CompatGeckoMobile("3.6")}} {{CompatUnknown}} 10.0 3.2

See also

  • Creator method in {{domxref("CanvasRenderingContext2D")}}.
  • The {{HTMLElement("canvas")}} element and its associated interface, {{domxref("HTMLCanvasElement")}}.
  • Pixel manipulation with canvas

Revision Source

<p>{{CanvasRef}}</p>
<p>The <code><strong>ImageData</strong></code> interface represents the underlying pixel data of an area of a {{HTMLElement("canvas")}} element. It is created using creators on the {{domxref("CanvasRenderingContext2D")}} object associated with the canvas (<code><a href="/en-US/docs/DOM/CanvasRenderingContext2D#createImageData" title="DOM/CanvasRenderingContext2D.createImageData">createImageData</a></code> and <code><a href="/en-US/docs/DOM/CanvasRenderingContext2D#getImageData" title="DOM/CanvasRenderingContext2D.getImageData">getImageData</a></code>). It can also be used to set a part of the canvas (like with <code><a href="/en-US/docs/DOM/CanvasRenderingContext2D#putImageData" title="DOM/CanvasRenderingContext2D.putImageData">putImageData</a></code>).</p>
<h2 id="Properties">Properties</h2>
<dl>
  <dt>
    <code>width</code> {{readonlyInline}}</dt>
  <dd>
    Is an <code>unsigned</code> <code>long</code> representing the actual width, in pixels, of the <code>ImageData</code>.</dd>
  <dt>
    <code>height</code> {{readonlyInline}}</dt>
  <dd>
    Is an <code>unsigned</code> <code>long</code> representing the actual height, in pixels, of the <code>ImageData</code>.</dd>
  <dt>
    <code>resolution</code> {{readonlyInline}} {{experimental_inline}}</dt>
  <dd>
    Is a <code>double</code> representing the pixel density of the <code>ImageData</code>. It is used to ensure that a {{domxref("ImageBitmap")}} object generated from an <code>ImageData</code> has the right pixel density.</dd>
  <dt>
    <code>data</code> {{readonlyInline}}</dt>
  <dd>
    Is a <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray" title="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray">Uint8ClampedArray</a></code> representing a one-dimensional array containing the data in the RGBA order, with integer values between <code>0</code> and <code>255</code> (included).</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>There is no specific method.</em></p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>Added the <code>resolution</code> property.</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML Canvas 2D Context W3C', '#imagedata', 'ImageData')}}</td>
      <td>{{Spec2('HTML Canvas 2D Context W3C')}}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>4.0</td>
        <td>{{CompatGeckoDesktop("3.6")}}</td>
        <td>9.0</td>
        <td>9.0</td>
        <td>3.1</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.1</td>
        <td>{{CompatGeckoMobile("3.6")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>10.0</td>
        <td>3.2</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>Creator method in {{domxref("CanvasRenderingContext2D")}}.</li>
  <li>The {{HTMLElement("canvas")}} element and its associated interface, {{domxref("HTMLCanvasElement")}}.</li>
  <li><a href="/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas" title="HTML/Canvas/Pixel manipulation with canvas">Pixel manipulation with canvas</a></li>
</ul>
Revert to this revision