{"json_modified": "2016-07-26T05:24:37.240613", "uuid": "53afe13e-2d74-455a-863c-9120364b1f1c", "title": "ImageData", "url": "/en-US/docs/Web/API/ImageData", "tags": ["Canvas", "Images", "ImageData", "API"], "translations": [{"uuid": "b575b481-a0e7-4153-8afa-d2dd2ab58fb9", "title": "ImageData", "url": "/fr/docs/Web/API/ImageData", "tags": ["Canvas", "API", "DOM", "JavaScript"], "summary": "L'interface <code><strong>ImageData</strong></code> repr\u00e9sente les donn\u00e9es des pixels au sein d'une certaine zone dans un \u00e9l\u00e9ment <a href=\"/fr/docs/Web/HTML/Element/canvas\" title=\"L'&#xE9;l&#xE9;ment HTML Canvas (&lt;canvas&gt;)&#xA0; permet de modifier une zone graphique via un script (habituellement en JavaScript). Par exemple il peut &#xEA;tre utilis&#xE9; pour dessiner des graphiques, manipuler des images ou jouer des animations. Il peut &#xEA;tre utilis&#xE9; pour l'affichage d'un jeu en ligne ou tout autre contenu interactif. Il est fortement recommand&#xE9; de fournir un contenu alternatif au contenu du bloc &lt;canvas&gt;. Ce contenu pourra &#xEA;tre utilis&#xE9; par les navigateurs plus anciens ne supportant pas l'&#xE9;l&#xE9;ment &lt;canvas&gt; et ceux dont JavaScript est d&#xE9;sactiv&#xE9;.\"><code>&lt;canvas&gt;</code></a>. Elle est d\u00e9finie par les constructeurs de l'objet <a href=\"/fr/docs/Web/API/CanvasRenderingContext2D\" title=\"Le contexte de rendu 2D pour la surface de dessin d'un &#xE9;l&#xE9;ment &lt;canvas&gt;. Pour obtenir cet objet, appelez getContext () sur un &lt;canvas&gt;, en fournissant &quot;2d&quot; comme argument:\"><code>CanvasRenderingContext2D</code></a> associ\u00e9s aux m\u00e9thodes <a href=\"/fr/docs/Web/API/CanvasRenderingContext2D#createImageData()\" title=\"/en-US/docs/Web/API/CanvasRenderingContext2D#createImageData()\">createImageData()</a> et <a href=\"/fr/docs/Web/API/CanvasRenderingContext2D#getImageData()\" title=\"/en-US/docs/Web/API/CanvasRenderingContext2D#getImageData()\">getImageData()</a>. Elle peut \u00eatre \u00e9galement utilis\u00e9e pour red\u00e9finir une partie du canvas (en utilisant par exemple <a href=\"/fr/docs/Web/API/CanvasRenderingContext2D#putImageData()\" title=\"/en-US/docs/Web/API/CanvasRenderingContext2D#putImageData()\">putImageData()</a>).", "localization_tags": ["inprogress"], "locale": "fr", "last_edit": "2014-10-13T02:17:41", "review_tags": ["technical"]}, {"uuid": "9cd54ac1-22a3-4f3b-870b-5de97a6cba97", "title": "ImageData", "url": "/ja/docs/Web/API/ImageData", "tags": ["Canvas", "DOM"], "summary": "<a title=\"HTML &#x306E; canvas &#x8981;&#x7D20; (&lt;canvas&gt;) &#x306F;&#x3001;&#x30B9;&#x30AF;&#x30EA;&#x30D7;&#x30C6;&#x30A3;&#x30F3;&#x30B0;&#xFF08;&#x57FA;&#x672C;&#x7684;&#x306B;&#x306F; JavaScript&#xFF09;&#x306B;&#x3088;&#x308A;&#x30B0;&#x30E9;&#x30D5;&#x30A3;&#x30C3;&#x30AF;&#x3092;&#x63CF;&#x753B;&#x3059;&#x308B;&#x4E8B;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002; &#x305F;&#x3068;&#x3048;&#x3070;&#x3001;&#x30B0;&#x30E9;&#x30D5;&#x306E;&#x63CF;&#x753B;&#x3001;&#x5199;&#x771F;&#x306E;&#x5408;&#x6210;&#x3001;&#x66F4;&#x306B;&#x306F;&#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x4F5C;&#x6210;&#x307E;&#x3067;&#x304C;&#x53EF;&#x80FD;&#x3067;&#x3059;&#x3002;&lt;canvas&gt; &#x306E;&#x30D6;&#x30ED;&#x30C3;&#x30AF;&#x5185;&#x3067;&#x3001;&#x4EE3;&#x66FF;&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4;&#x3092;&#x63D0;&#x4F9B;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x53EF;&#x80FD; (&#x307E;&#x305F;&#x3001;&#x63D0;&#x4F9B;&#x3059;&#x3079;&#x304D;) &#x3067;&#x3059;&#x3002;&#x305D;&#x306E;&#x5185;&#x5BB9;&#x7269;&#x306F;&#x3001;canvas &#x3092;&#x30B5;&#x30DD;&#x30FC;&#x30C8;&#x3057;&#x306A;&#x3044;&#x53E4;&#x3044;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x304A;&#x3088;&#x3073; JavaScript &#x304C;&#x7121;&#x52B9;&#x3067;&#x3042;&#x308B;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x63CF;&#x753B;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;\" href=\"/ja/docs/Web/HTML/Element/canvas\"><code>&lt;canvas&gt;</code></a> \u8981\u7d20\u3067\u7528\u3044\u3089\u308c\u307e\u3059\u3002 <a title=\"DOM/CanvasRenderingContext2D\" href=\"/ja/docs/DOM/CanvasRenderingContext2D\"><code>CanvasRenderingContext2D</code></a> \u306e <a title=\"DOM/CanvasRenderingContext2D.createImageData\" href=\"/ja/docs/DOM/CanvasRenderingContext2D.createImageData\">createImageData</a> \u30e1\u30bd\u30c3\u30c9\u53ca\u3073 <a title=\"DOM/CanvasRenderingContext2D.getImageData\" href=\"/ja/docs/DOM/CanvasRenderingContext2D.getImageData\">getImageData</a> \u30e1\u30bd\u30c3\u30c9\u306b\u3088\u3063\u3066\u8fd4\u3055\u308c\u307e\u3059\u3002 <code>ImageData</code> \u306f <a title=\"DOM/CanvasRenderingContext2D.putImageData\" href=\"/ja/docs/DOM/CanvasRenderingContext2D.putImageData\">putImageData</a> \u30e1\u30bd\u30c3\u30c9\u306e\u7b2c\u4e00\u5f15\u6570\u3068\u3057\u3066\u5229\u7528\u53ef\u80fd\u3067\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2013-05-25T07:43:48", "review_tags": []}, {"uuid": "7cdf7e9c-1eaf-46a3-8748-d96fd4958689", "title": "ImageData", "url": "/ko/docs/Web/API/ImageData", "tags": [], "summary": "<code><strong>ImageData</strong></code> \uc778\ud130\ud398\uc774\uc2a4\ub294 <a href=\"/ko/docs/Web/HTML/Element/canvas\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;canvas&gt;</code></a> \uc5d8\ub9ac\uba3c\ud2b8 \uc601\uc5ed\uc758 \uae30\uc800\uc758 \ud53d\uc140\ub370\uc774\ud130\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4<a href=\"/ko/docs/Web/API/ImageData/ImageData\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>ImageData()</code></a>\uc0dd\uc131\uc790\ub098 canvas\uac1d\uccb4\uc5d0 \uc5f0\uacb0\ub41c <a href=\"/ko/docs/Web/API/CanvasRenderingContext2D\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>CanvasRenderingContext2D</code></a>\uac1d\uccb4\uc758 <a href=\"/ko/docs/Web/API/CanvasRenderingContext2D/createImageData\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>createImageData()</code></a>\ub098 <a href=\"/ko/docs/Web/API/CanvasRenderingContext2D/getImageData\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>getImageData()</code></a>\uba54\uc18c\ub4dc\ub85c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <strong><font face=\"Courier New\">ImageData</font></strong>\ub294 <a href=\"/ko/docs/Web/API/CanvasRenderingContext2D/putImageData\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>putImageData()</code></a>\uc758 \uc778\uc790\ub85c \uc804\ub2ec\ud560 \uc218 \uc788\uc73c\uba70, \uc774\ub97c \ud1b5\ud574 canvas\uc758 \uc77c\ubd80\ub85c \ubc18\uc601\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.", "localization_tags": ["inprogress"], "locale": "ko", "last_edit": "2015-06-01T20:54:54", "review_tags": []}, {"uuid": "fb371ae3-9de3-455c-ab0e-56e470060c45", "title": "ImageData", "url": "/ru/docs/Web/API/ImageData", "tags": [], "summary": "<code><font face=\"Open Sans, Arial, sans-serif\">\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u00a0</font><strong>ImageData</strong></code>\u00a0\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043b\u0435\u0436\u0430\u0449\u0438\u0435 \u0432 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u00a0<a href=\"/ru/docs/Web/HTML/Element/canvas\" title=\"HTML &lt;canvas&gt;&#xA0;&#x42D;&#x43B;&#x435;&#x43C;&#x435;&#x43D;&#x442; &#x43C;&#x43E;&#x436;&#x435;&#x442; &#x431;&#x44B;&#x442;&#x44C; &#x438;&#x441;&#x43F;&#x43E;&#x43B;&#x44C;&#x437;&#x43E;&#x432;&#x430;&#x43D; &#x434;&#x43B;&#x44F; &#x440;&#x438;&#x441;&#x43E;&#x432;&#x430;&#x43D;&#x438;&#x44F; &#x433;&#x440;&#x430;&#x444;&#x438;&#x43A;&#x438; &#x447;&#x435;&#x440;&#x435;&#x437; &#x441;&#x43A;&#x440;&#x438;&#x43F;&#x442;&#x44B;&#xA0;(&#x43E;&#x431;&#x44B;&#x447;&#x43D;&#x43E; &#x438;&#x441;&#x43F;&#x43E;&#x43B;&#x44C;&#x437;&#x443;&#x435;&#x442;&#x441;&#x44F;&#xA0;JavaScript). &#x41D;&#x430; &#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440;, &#x435;&#x433;&#x43E; &#x43C;&#x43E;&#x436;&#x43D;&#x43E; &#x438;&#x441;&#x43F;&#x43E;&#x43B;&#x44C;&#x437;&#x43E;&#x432;&#x430;&#x442;&#x44C; &#x434;&#x43B;&#x44F; &#x440;&#x438;&#x441;&#x43E;&#x432;&#x430;&#x43D;&#x438;&#x44F; &#x433;&#x440;&#x430;&#x444;&#x438;&#x43A;&#x43E;&#x432;, &#x434;&#x435;&#x43B;&#x430;&#x442;&#x44C; &#x43A;&#x43E;&#x43C;&#x43F;&#x43E;&#x437;&#x438;&#x446;&#x438;&#x438; &#x444;&#x43E;&#x442;&#x43E; &#x438;&#x43B;&#x438; &#x434;&#x430;&#x436;&#x435;&#xA0;&#x432;&#x44B;&#x43F;&#x43E;&#x43B;&#x43D;&#x44F;&#x442;&#x44C; &#x430;&#x43D;&#x438;&#x43C;&#x430;&#x446;&#x438;&#x438;. &#x412;&#x44B; &#x43C;&#x43E;&#x436;&#x435;&#x442;&#x435; (&#x438; &#x434;&#x43E;&#x43B;&#x436;&#x43D;&#x44B;) &#x434;&#x430;&#x442;&#x44C; &#x430;&#x43B;&#x44C;&#x442;&#x435;&#x440;&#x43D;&#x430;&#x442;&#x438;&#x432;&#x43D;&#x43E;&#x435; &#x441;&#x43E;&#x434;&#x435;&#x440;&#x436;&#x430;&#x43D;&#x438;&#x435;&#xA0;&#x432;&#x43D;&#x443;&#x440;&#x438;&#xA0;&#x431;&#x43B;&#x43E;&#x43A;&#x430;&#xA0;&lt;canvas&gt;. &#x42D;&#x442;&#x43E;&#x442; &#x43A;&#x43E;&#x43D;&#x442;&#x435;&#x43D;&#x442; &#x431;&#x443;&#x434;&#x435;&#x442; &#x440;&#x435;&#x43D;&#x434;&#x435;&#x440;&#x438;&#x442;&#x441;&#x44F; &#x432; &#x43E;&#x431;&#x43E;&#x438;&#x445; &#x431;&#x440;&#x430;&#x443;&#x437;&#x435;&#x440;&#x430;&#x445;, &#x432; &#x441;&#x442;&#x430;&#x440;&#x44B;&#x445; &#x43A;&#x43E;&#x442;&#x43E;&#x440;&#x44B;&#x435; &#x43D;&#x435; &#x43F;&#x43E;&#x434;&#x434;&#x435;&#x440;&#x436;&#x438;&#x432;&#x430;&#x44E;&#x442; canvas &#x438; &#x432; &#x431;&#x440;&#x430;&#x443;&#x437;&#x435;&#x440;&#x430;&#x445; &#x441; &#x43E;&#x442;&#x43A;&#x43B;&#x44E;&#x447;&#x451;&#x43D;&#x43D;&#x44B;&#x43C; JavaScript.\"><code>&lt;canvas&gt;</code></a>. \u041e\u043d \u0441\u043e\u0437\u0434\u0430\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u00a0<a href=\"/ru/docs/Web/API/ImageData/ImageData\" title=\"&#x414;&#x43E;&#x43A;&#x443;&#x43C;&#x435;&#x43D;&#x442;&#x430;&#x446;&#x438;&#x44F; &#x43E;&#x431; &#x44D;&#x442;&#x43E;&#x43C; &#x435;&#x449;&#x451; &#x43D;&#x435; &#x43D;&#x430;&#x43F;&#x438;&#x441;&#x430;&#x43D;&#x430;; &#x43F;&#x43E;&#x436;&#x430;&#x43B;&#x443;&#x439;&#x441;&#x442;&#x430;, &#x43F;&#x43E;&#x441;&#x43F;&#x43E;&#x441;&#x43E;&#x431;&#x441;&#x442;&#x432;&#x443;&#x439;&#x442;&#x435; &#x435;&#x451; &#x43D;&#x430;&#x43F;&#x438;&#x441;&#x430;&#x43D;&#x438;&#x44E;!\"><code>ImageData()</code></a> \u0438\u043b\u0438 \u043c\u0435\u0442\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u00a0<a href=\"/ru/docs/Web/API/CanvasRenderingContext2D\" title=\"&#x418;&#x43D;&#x442;&#x435;&#x440;&#x444;&#x435;&#x439;&#x441; CanvasRenderingContext2D &#x43F;&#x440;&#x435;&#x434;&#x43E;&#x441;&#x442;&#x430;&#x432;&#x43B;&#x44F;&#x435;&#x442; &#x43A;&#x43E;&#x43D;&#x442;&#x435;&#x43A;&#x441;&#x442; 2D &#x440;&#x435;&#x43D;&#x434;&#x435;&#x440;&#x438;&#x43D;&#x433;&#x430; &#x434;&#x43B;&#x44F; &#x43F;&#x43E;&#x432;&#x435;&#x440;&#x445;&#x43D;&#x43E;&#x441;&#x442;&#x438; &#x440;&#x438;&#x441;&#x43E;&#x432;&#x430;&#x43D;&#x438;&#x44F; &#x44D;&#x43B;&#x435;&#x43C;&#x435;&#x43D;&#x442;&#x430; &lt;canvas&gt;.\"><code>CanvasRenderingContext2D</code></a> \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u00a0canvas: <a href=\"/ru/docs/Web/API/CanvasRenderingContext2D/createImageData\" title=\"&#x414;&#x43E;&#x43A;&#x443;&#x43C;&#x435;&#x43D;&#x442;&#x430;&#x446;&#x438;&#x44F; &#x43E;&#x431; &#x44D;&#x442;&#x43E;&#x43C; &#x435;&#x449;&#x451; &#x43D;&#x435; &#x43D;&#x430;&#x43F;&#x438;&#x441;&#x430;&#x43D;&#x430;; &#x43F;&#x43E;&#x436;&#x430;&#x43B;&#x443;&#x439;&#x441;&#x442;&#x430;, &#x43F;&#x43E;&#x441;&#x43F;&#x43E;&#x441;&#x43E;&#x431;&#x441;&#x442;&#x432;&#x443;&#x439;&#x442;&#x435; &#x435;&#x451; &#x43D;&#x430;&#x43F;&#x438;&#x441;&#x430;&#x43D;&#x438;&#x44E;!\"><code>createImageData()</code></a> \u0438 <a href=\"/ru/docs/Web/API/CanvasRenderingContext2D/getImageData\" title=\"&#x414;&#x43E;&#x43A;&#x443;&#x43C;&#x435;&#x43D;&#x442;&#x430;&#x446;&#x438;&#x44F; &#x43E;&#x431; &#x44D;&#x442;&#x43E;&#x43C; &#x435;&#x449;&#x451; &#x43D;&#x435; &#x43D;&#x430;&#x43F;&#x438;&#x441;&#x430;&#x43D;&#x430;; &#x43F;&#x43E;&#x436;&#x430;&#x43B;&#x443;&#x439;&#x441;&#x442;&#x430;, &#x43F;&#x43E;&#x441;&#x43F;&#x43E;&#x441;&#x43E;&#x431;&#x441;&#x442;&#x432;&#x443;&#x439;&#x442;&#x435; &#x435;&#x451; &#x43D;&#x430;&#x43F;&#x438;&#x441;&#x430;&#x43D;&#x438;&#x44E;!\"><code>getImageData()</code></a>. \u041e\u043d \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0447\u0430\u0441\u0442\u0438\u00a0canvas \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0435\u0442\u043e\u0434\u00a0<a href=\"/ru/docs/Web/API/CanvasRenderingContext2D/putImageData\" title=\"&#x414;&#x43E;&#x43A;&#x443;&#x43C;&#x435;&#x43D;&#x442;&#x430;&#x446;&#x438;&#x44F; &#x43E;&#x431; &#x44D;&#x442;&#x43E;&#x43C; &#x435;&#x449;&#x451; &#x43D;&#x435; &#x43D;&#x430;&#x43F;&#x438;&#x441;&#x430;&#x43D;&#x430;; &#x43F;&#x43E;&#x436;&#x430;&#x43B;&#x443;&#x439;&#x441;&#x442;&#x430;, &#x43F;&#x43E;&#x441;&#x43F;&#x43E;&#x441;&#x43E;&#x431;&#x441;&#x442;&#x432;&#x443;&#x439;&#x442;&#x435; &#x435;&#x451; &#x43D;&#x430;&#x43F;&#x438;&#x441;&#x430;&#x43D;&#x438;&#x44E;!\"><code>putImageData()</code></a>.", "localization_tags": ["inprogress"], "locale": "ru", "last_edit": "2016-03-14T06:48:07", "review_tags": []}, {"uuid": "f5aca89a-b5e2-4396-87d7-3d3c2c4f3bef", "title": "ImageData", "url": "/zh-CN/docs/Web/API/ImageData", "tags": [], "summary": "<code><strong>ImageData</strong></code>\u00a0\u63a5\u53e3\u63cf\u8ff0 <a href=\"/zh-CN/docs/Web/HTML/Element/canvas\" title=\"HTML &lt;&#x5E06;&#x5E03;&gt;&#x5143;&#x7D20;&#x53EF;&#x4EE5;&#x7528;&#x6765;&#x7ED8;&#x5236;&#x56FE;&#x5F62;&#x901A;&#x8FC7;&#x811A;&#x672C;(&#x901A;&#x5E38;JavaScript)&#x3002;&#x4F8B;&#x5982;,&#x5B83;&#x53EF;&#x4EE5;&#x88AB;&#x7528;&#x6765;&#x7ED8;&#x5236;&#x56FE;&#x5F62;,&#x4F7F;&#x6444;&#x5F71;&#x4F5C;&#x54C1;,&#x751A;&#x81F3;&#x6267;&#x884C;&#x52A8;&#x753B;&#x3002;&#x4F60;&#x53EF;&#x4EE5;(&#x4E5F;&#x5E94;&#x8BE5;)&#x5728;&lt;&#x5E06;&#x5E03;&gt;&#x5757;&#x63D0;&#x4F9B;&#x66FF;&#x4EE3;&#x5185;&#x5BB9;&#x3002;&#x5185;&#x5BB9;&#x5C31;&#x4F1A;&#x5448;&#x73B0;&#x5728;&#x65E7;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x4E0D;&#x652F;&#x6301;&#x753B;&#x5E03;&#x548C;&#x6D4F;&#x89C8;&#x5668;&#x7981;&#x7528;&#x4E86;JavaScript&#x3002;\"><code>&lt;canvas&gt;</code></a> \u5143\u7d20\u7684\u4e00\u4e2a\u9690\u542b\u50cf\u7d20\u6570\u636e\u7684\u533a\u57df\u3002\u4f7f\u7528\u00a0<a href=\"/zh-CN/docs/Web/API/ImageData/ImageData\" title=\"&#x6B64;&#x9875;&#x9762;&#x4ECD;&#x672A;&#x88AB;&#x672C;&#x5730;&#x5316;, &#x671F;&#x5F85;&#x60A8;&#x7684;&#x7FFB;&#x8BD1;!\"><code>ImageData()</code></a> \u6784\u9020\u51fd\u6570\u521b\u5efa\u6216\u8005\u4f7f\u7528\u548c canvas \u5728\u4e00\u8d77\u7684 <a href=\"/zh-CN/docs/Web/API/CanvasRenderingContext2D\" title=\"CanvasRenderingContext2D&#xA0;&#x63A5;&#x53E3;&#x63D0;&#x4F9B;&#x7684; 2D &#x6E32;&#x67D3;&#x4E0A;&#x4E0B;&#x6587;&#x7528;&#x6765;&#x7ED8;&#x5236;&lt;canvas&gt;&#x5143;&#x7D20;&#xFF0C;&#x4E3A;&#x4E86;&#x83B7;&#x5F97;&#x8FD9;&#x4E2A;&#x63A5;&#x53E3;&#x7684;&#x5BF9;&#x8C61;&#xFF0C;&#x9700;&#x8981;&#x5728; &lt;canvas&gt; &#x4E0A;&#x8C03;&#x7528; getContext()&#xA0;&#xFF0C;&#x5E76;&#x63D0;&#x4F9B;&#x4E00;&#x4E2A; &quot;2d&quot; &#x7684;&#x53C2;&#x6570;&#xFF1A;\"><code>CanvasRenderingContext2D</code></a> \u5bf9\u8c61\u7684\u521b\u5efa\u65b9\u6cd5\uff1a\u00a0<a href=\"/zh-CN/docs/Web/API/CanvasRenderingContext2D/createImageData\" title=\"CanvasRenderingContext2D.createImageData() &#x662F; Canvas 2D API &#x521B;&#x5EFA;&#x4E00;&#x4E2A; &#x65B0;&#x7684;&#x3001;&#x7A7A;&#x767D;&#x7684;&#x3001;&#x6307;&#x5B9A;&#x5927;&#x5C0F;&#x7684; ImageData &#x5BF9;&#x8C61;&#x3002; &#x6240;&#x6709;&#x7684;&#x50CF;&#x7D20;&#x5728;&#x65B0;&#x5BF9;&#x8C61;&#x4E2D;&#x90FD;&#x662F;&#x900F;&#x660E;&#x7684;&#x3002;\"><code>createImageData()</code></a> \u548c <a href=\"/zh-CN/docs/Web/API/CanvasRenderingContext2D/getImageData\" title=\"CanvasRenderingContext2D.getImageData() &#x8FD4;&#x56DE;&#x4E00;&#x4E2A;ImageData&#x5BF9;&#x8C61;&#xFF0C;&#x7528;&#x6765;&#x63CF;&#x8FF0;canvas&#x533A;&#x57DF;&#x9690;&#x542B;&#x7684;&#x50CF;&#x7D20;&#x6570;&#x636E;&#xFF0C;&#x8FD9;&#x4E2A;&#x533A;&#x57DF;&#x901A;&#x8FC7;&#x77E9;&#x5F62;&#x8868;&#x793A;&#xFF0C;&#x8D77;&#x59CB;&#x70B9;&#x4E3A;(sx, sy)&#x3001;&#x5BBD;&#x4E3A;sw&#x3001;&#x9AD8;&#x4E3A;sh&#x3002;\"><code>getImageData()</code></a>\u3002\u4e5f\u53ef\u4ee5\u4f7f\u7528\u00a0<a href=\"/zh-CN/docs/Web/API/CanvasRenderingContext2D/putImageData\" title=\"CanvasRenderingContext2D.putImageData()&#xA0;&#x662F; Canvas 2D API &#x5C06;&#x6570;&#x636E;&#x4ECE;&#x5DF2;&#x6709;&#x7684;&#xA0;{{domxref(&quot;ImageData&quot;)}} &#x5BF9;&#x8C61;&#x7ED8;&#x5236;&#x5230;&#x4F4D;&#x56FE;&#x7684;&#x65B9;&#x6CD5;&#x3002; &#x5982;&#x679C;&#x63D0;&#x4F9B;&#x4E86;&#x810F;&#x77E9;&#x5F62;&#xFF0C;&#x53EA;&#x80FD;&#x7ED8;&#x5236;&#x77E9;&#x5F62;&#x7684;&#x50CF;&#x7D20;&#x3002;\"><code>putImageData()</code></a> \u8bbe\u7f6e canvas \u7684\u4e00\u90e8\u5206\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2015-06-14T23:33:33", "review_tags": []}], "modified": "2016-07-26T05:24:36", "label": "ImageData", "localization_tags": [], "locale": "en-US", "id": 1708, "last_edit": "2015-12-02T11:02:53", "summary": "The <code><strong>ImageData</strong></code> interface represents the underlying pixel data of an area of a <a href=\"/en-US/docs/Web/HTML/Element/canvas\" title=\"The HTML &lt;canvas&gt; Element can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations. You may (and should) provide alternate content inside the &lt;canvas&gt; block. That content will be rendered both on older browsers that don't support canvas and in browsers with JavaScript disabled.\"><code>&lt;canvas&gt;</code></a> element. It is created using the <a href=\"/en-US/docs/Web/API/ImageData/ImageData\" title=\"The ImageData() constructor returns a newly instantiated ImageData object build from the typed array given and having the specified width and height.\"><code>ImageData()</code></a> constructor or creator methods on the <a href=\"/en-US/docs/Web/API/CanvasRenderingContext2D\" title=\"To get an object of this interface, call getContext() on a &lt;canvas&gt;&#xA0;element, supplying &quot;2d&quot; as the argument:\"><code>CanvasRenderingContext2D</code></a> object associated with a canvas: <a href=\"/en-US/docs/Web/API/CanvasRenderingContext2D/createImageData\" title=\"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.\"><code>createImageData()</code></a> and <a href=\"/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData\" title=\"The CanvasRenderingContext2D.getImageData() method of the Canvas 2D API returns an ImageData object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.\"><code>getImageData()</code></a>. It can also be used to set a part of the canvas by using <a href=\"/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData\" title=\"The CanvasRenderingContext2D.putImageData() method of the Canvas 2D API paints data from the given ImageData object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.\"><code>putImageData()</code></a>.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Constructors", "title": "Constructors"}, {"id": "Properties", "title": "Properties"}, {"id": "Specifications", "title": "Specifications"}, {"id": "Browser_compatibility", "title": "Browser compatibility"}, {"id": "See_also", "title": "See also"}], "slug": "Web/API/ImageData", "review_tags": []}