---
title: ImageData
slug: Web/API/ImageData
tags:
  - API
  - Canvas
  - ImageData
  - Images
translation_of: Web/API/ImageData
---
<div>{{APIRef("Canvas API")}}</div>

<p><code><strong>ImageData</strong></code> インターフェイスは、{{HTMLElement("canvas")}} 要素の領域の基礎をなすピクセルデータを表します。{{domxref("ImageData.ImageData", "ImageData()")}} コンストラクターや、canvas に関連付けられた {{domxref("CanvasRenderingContext2D")}} オブジェクトの {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} メソッドおよび {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} メソッドによって生成されます。<code>ImageData</code> は {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}} メソッドの第 1 引数として利用可能です。</p>

<h2 id="Constructors" name="Constructors">コンストラクター</h2>

<dl>
 <dt>{{domxref("ImageData.ImageData", "ImageData()")}} {{experimental_inline}}</dt>
 <dd>指定した {{jsxref("Uint8ClampedArray")}} と、それに含まれる画像のサイズから <code>ImageData</code> オブジェクトを生成します。配列を指定しない場合は、黒色の長方形の画像を生成します。worker では {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} を使用できませんので、worker でこのようなオブジェクトを生成するためのもっとも一般的な手段です。</dd>
</dl>

<h2 id="Properties" name="Properties">プロパティ</h2>

<dl>
 <dt>{{domxref("ImageData.data")}} {{readonlyInline}}</dt>
 <dd>RGBA の順で <code>0</code> から <code>255</code> の間の整数 (両端の値を含む) を並べたデータを持つ 1 次元配列を表す {{jsxref("Uint8ClampedArray")}} です。</dd>
 <dt>{{domxref("ImageData.height")}} {{readonlyInline}}</dt>
 <dd><code>ImageData</code> の実際の高さをピクセル数で表す <code>unsigned</code> <code>long</code> です。</dd>
 <dt>{{domxref("ImageData.width")}} {{readonlyInline}}</dt>
 <dd><code>ImageData</code> の実際の幅をピクセル数で表す <code>unsigned</code> <code>long</code> です。</dd>
</dl>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">策定状況</th>
   <th scope="col">コメント</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>

<p>{{Compat("api.ImageData")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{domxref("CanvasRenderingContext2D")}}</li>
 <li>{{HTMLElement("canvas")}} 要素と、関連付けられたインターフェイスである {{domxref("HTMLCanvasElement")}}。</li>
</ul>