HTML canvas getImageData() 方法

Ƙadda ƙarɗe

Mukaddasar Tsarin Kira

HTML ƙɗauki

</a></li> <li><a href="/ha/tags/tag_img.html" title="اللحاف <img> تاگ"><img></a></li> <li><a href="/ha/tags/tag_input.html" title="اللحاف <input> تاگ"><input></a></li> <li><a href="/ha/tags/tag_ins.html" title="اللحاف <ins> تاگ"><ins></a></li> <li><a href="/ha/tags/tag_kbd.html" title="اللحاف <kbd> تاگ"><kbd></a></li> <li><a href="/ha/tags/tag_label.html" title="اللحاف <label> تاگ"><label></a></li> <li><a href="/ha/tags/tag_legend.html" title="اللحاف <legend> تاگ"><legend></a></li> <li><a href="/ha/tags/tag_li.html" title="اللحاف <li> تاگ"><li></a></li> <li><a href="/ha/tags/tag_link.html" title="اللحاف <link> تاگ"><link></a></li> <li><a href="/ha/tags/tag_main.html" title="اللحاف <main> تاگ"><main></a></li> <li><a href="/ha/tags/tag_map.html" title="اللحاف <map> تاگ"><map></a></li> <li><a href="/ha/tags/tag_mark.html" title="اللحاف <mark> تاگ"><mark></a></li> <li><a href="/ha/tags/tag_menu.html" title="اللحاف <menu> تاگ"><menu></a></li> <li><a href="/ha/tags/tag_meta.html" title="اللحاف <meta> تاگ"><meta></a></li> <li><a href="/ha/tags/tag_meter.html" title="اللحاف <meter> تاگ"><meter></a></li> <li><a href="/ha/tags/tag_nav.html" title="اللحاف <nav> تاگ"><nav></a></li> <li><a href="/ha/tags/tag_noframes.html" title="اللحاف <noframes> تاگ"><noframes></a></li> <li><a href="/ha/tags/tag_noscript.html" title="اللحاف <noscript> تاگ"><noscript></a></li> <li><a href="/ha/tags/tag_object.html" title="اللحاف <object> تاگ"><object></a></li> <li><a href="/ha/tags/tag_ol.html" title="اللحاف <ol> تاگ"><ol></a></li> <li><a href="/ha/tags/tag_optgroup.html" title="اللحاف <optgroup> تاگ"><optgroup></a></li> <li><a href="/ha/tags/tag_option.html" title="اللحاف <option> تاگ"><option></a></li> <li><a href="/ha/tags/tag_output.html" title="اللحاف <output> تاگ"><output></a></li> <li><a href="/ha/tags/tag_p.html" title="اللحاف <p> تاگ"><p></a></li> <li><a href="/ha/tags/tag_param.html" title="اللحاف <param> تاگ"><param></a></li> <li><a href="/ha/tags/tag_picture.html" title="اللحاف <picture> تاگ"><picture></a></li> <li><a href="/ha/tags/tag_pre.html" title="اللحاف <pre> تاگ"><pre></a></li> <li><a href="/ha/tags/tag_progress.html" title="اللحاف <progress> تاگ"><progress></a></li> <li><a href="/ha/tags/tag_q.html" title="اللحاف <q> تاگ"><q></a></li> <li><a href="/ha/tags/tag_rp.html" title="اللحاف <rp> تاگ"><rp></a></li> <li><a href="/ha/tags/tag_rt.html" title="اللحاف <rt> تاگ"><rt></a></li> <li><a href="/ha/tags/tag_ruby.html" title="اللحاف <ruby> تاگ"><ruby></a></li> <li><a href="/ha/tags/tag_s.html" title="اللحاف <s> تاگ"><s></a></li> <li><a href="/ha/tags/tag_samp.html" title="اللحاف <samp> تاگ"><samp></a></li> <li><a href="/ha/tags/tag_script.html" title="اللحاف <script> تاگ"><script></a></li> <li><a href="/ha/tags/tag_search.html" title="اللحاف <search> تاگ"><search></a></li> <li><a href="/ha/tags/tag_section.html" title="اللحاف <section> تاگ"><section></a></li> <li><a href="/ha/tags/tag_select.html" title="اللحاف <select> تاگ"><select></a></li> <li><a href="/ha/tags/tag_small.html" title="اللحاف <small> تاگ"><small></a></li> <li><a href="/ha/tags/tag_source.html" title="اللحاف <source> تاگ"><source></a></li> <li><a href="/ha/tags/tag_span.html" title="اللحاف <span> تاگ"><span></a></li> <li><a href="/ha/tags/tag_strike.html" title="اللحاف <strike> تاگ"><strike></a></li> <li><a href="/ha/tags/tag_strong.html" title="اللحاف <strong> تاگ"><strong></a></li> <li><a href="/ha/tags/tag_style.html" title="HTML <style> ɗauka"><style></a></li> <li><a href="/ha/tags/tag_sub.html" title="HTML <sub> ɗauka"><sub></a></li> <li><a href="/ha/tags/tag_summary.html" title="HTML <summary> ɗauka"><summary></a></li> <li><a href="/ha/tags/tag_sup.html" title="HTML <sup> ɗauka"><sup></a></li> <li><a href="/ha/tags/tag_svg.html" title="HTML <svg> ɗauka"><svg></a></li> <li><a href="/ha/tags/tag_table.html" title="HTML <table> ɗauka"><table></a></li> <li><a href="/ha/tags/tag_tbody.html" title="HTML <tbody> ɗauka"><tbody></a></li> <li><a href="/ha/tags/tag_td.html" title="HTML <td> ɗauka"><td></a></li> <li><a href="/ha/tags/tag_template.html" title="HTML <template> ɗauka"><template></a></li> <li><a href="/ha/tags/tag_textarea.html" title="HTML <textarea> ɗauka"><textarea></a></li> <li><a href="/ha/tags/tag_tfoot.html" title="HTML <tfoot> ɗauka"><tfoot></a></li> <li><a href="/ha/tags/tag_th.html" title="HTML <th> ɗauka"><th></a></li> <li><a href="/ha/tags/tag_thead.html" title="HTML <thead> ɗauka"><thead></a></li> <li><a href="/ha/tags/tag_time.html" title="HTML <time> ɗauka"><time></a></li> <li><a href="/ha/tags/tag_title.html" title="HTML <title> ɗauka"><title></a></li> <li><a href="/ha/tags/tag_tr.html" title="HTML <tr> ɗauka"><tr></a></li> <li><a href="/ha/tags/tag_track.html" title="HTML <track> ɗauka"><track></a></li> <li><a href="/ha/tags/tag_tt.html" title="HTML <tt> ɗauka"><tt></a></li> <li><a href="/ha/tags/tag_u.html" title="HTML <u> ɗauka"><u></a></li> <li><a href="/ha/tags/tag_ul.html" title="HTML <ul> ɗauka"><ul></a></li> <li><a href="/ha/tags/tag_var.html" title="HTML <var> ɗauka"><var></a></li> <li><a href="/ha/tags/tag_video.html" title="HTML <video> ɗauka"><video></a></li> <li><a href="/ha/tags/tag_wbr.html" title="HTML <wbr> ɗauka"><wbr></a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/ha/howto/index.html" title="CodeW3C.com ɗabɓi">CodeW3C.com ɗabɓi</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>HTML canvas getImageData() 方法</h1> <div class="backtoreference"> <p><a href="/ha/tags/html_ref_canvas.html">Kwamfuta HTML5 Canvas</a></p> </div> <div> <h2>定义和用法</h2> <p><code>getImageData()</code> 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。</p> <p>对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：</p> <ul> <li>R - 红色 (0-255)</li> <li>G - 绿色 (0-255)</li> <li>B - 蓝色 (0-255)</li> <li>A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)</li> </ul> <p>color/alpha 以数组形式存在，并存储于 ImageData 对象的 <a href="/ha/tags/canvas_imagedata_data.html" title="HTML canvas data ɗauka">data</a> 属性中。</p> <p class="tip"><span>提示：</span>在操作完成数组中的 color/alpha 信息之后，您可以使用 <a href="/ha/tags/canvas_putimagedata.html" title="HTML canvas putImageData() ɗauka">putImageData()</a> 方法将图像数据拷贝回画布上。</p> <h3>例子：</h3> <p>以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息：</p> <pre class="language-js"> red=imgData.data[0]; green=imgData.data[1]; blue=imgData.data[2]; alpha=imgData.data[3]; </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=eg_html5_canvas_getimagedata_firstpx">Kai ɗan wasa</a></p> <p class="tip"><span>提示：</span>您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。</p> <p>使用该公式遍历所有的像素，并改变其颜色值：</p> <pre class="language-js"> red=255-old_red; green=255-old_green; blue=255-old_blue; </pre> <p>（请见下面的“亲自试一试”实例。）</p> </div> <div> <h2>实例</h2> <h3>例子 1</h3> <p>下面的代码通过 getImageData() 复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回画布：</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(10,10,50,50); function copy() } var <mark>imgData=ctx.getImageData(10,10,50,50)</mark>; ctx.putImageData(imgData,10,70); } </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=eg_html5_canvas_getimagedata">Kai ɗan wasa</a></p> <p class="tip"><span>提示：</span>页面底部提供更多实例。</p> </div> <div> <h2>语法</h2> <pre>var imgData=context.getImageData(<i>x</i>,<i>y</i>,<i>width</i>,<i>height</i>);</pre> <h3>参数值</h3> <table class="dataintable"> <tr> <th style="width:25%;">参数</th> <th>描述</th> </tr> <tr> <td><i>x</i></td> <td>开始复制的左上角位置的 x 坐标。</td> </tr> <tr> <td><i>y</i></td> <td>开始复制的左上角位置的 y 坐标。</td> </tr> <tr> <td><i>width</i></td> <td>将要复制的矩形区域的宽度。</td> </tr> <tr> <td><i>height</i></td> <td>将要复制的矩形区域的高度。</td> </tr> </table> </div> <div> <h2>更多实例</h2> <h3>例子 2</h3> <p>要使用的图像：</p> <img src="/i/eg_tulip.jpg" id="tulip" alt="Tulip" style="margin-left:10px;" /> <p>使用 getImageData() 来反转画布上的图像的每个像素的颜色。</p> <canvas id="myCanvas2" width="450" height="300" style="border:1px solid #d3d3d3;background:#ffffff; margin-top:15px;"> Aniki kaiya ba koyi aiki HTML5 canvas tag. </canvas> <script> document.getElementById("tulip").onload=function(){ var c=document.getElementById("myCanvas2"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); var img=document.getElementById("tulip"); ctx.drawImage(img,10,10); var imgData=ctx.getImageData(0,0,c.width,c.height); for (i=0; i<imgData.width*imgData.height*4;i+=4) { imgData.data[i]=255-imgData.data[i]; imgData.data[i+1]=255-imgData.data[i+1]; imgData.data[i+2]=255-imgData.data[i+2]; imgData.data[i+3]=255; } ctx.putImageData(imgData,0,0); } }; </script> <p>JavaScript:</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("tulip"); ctx.drawImage(img,0,0); var imgData=<mark>ctx.getImageData(0,0,c.width,c.height)</mark>; // fada waje for (var i=0; i<imgData.data.length; i+=4) } imgData.data[i]=255-imgData.data[i]; imgData.data[i+1]=255-imgData.data[i+1]; imgData.data[i+2]=255-imgData.data[i+2]; imgData.data[i+3]=255; } ctx.putImageData(imgData,0,0); </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=eg_html5_canvas_getimagedata_firstpx">Kai ɗan wasa</a></p> </div> <div> <h2>Daukar ɗauka</h2> <p>Dabi'annin kanin ɗauka ɗauka na ɗauka ɗauka na farko da a ɗauka ɗan wasan.</p> <table class="browser-support"> <tr> <th class="bsChrome">Chrome</th> <th class="bsEdge">Edge</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>Chrome</td> <td>Edge</td> <td>Firefox</td> <td>Safari</td> <td>Opera</td> </tr> <tr> <td>4.0</td> <td>9.0</td> <td>3.6</td> <td>4.0</td> <td>10.1</td> </tr> </table> <p class="note"><span>Tattalin kanin:</span>Internet Explorer 8 da ɗakuna ba a ɗauka <canvas> ɗauka ba.</p> </div> <div class="backtoreference"> <p><a href="/ha/tags/html_ref_canvas.html">Kwamfuta HTML5 Canvas</a></p> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> Kwamfuta </center><h3> <h5 id="tools_reference"><a href="/ha/tags/index.html">Kwamfuta HTML</a></h5> <h5 id="tools_example"><a href="/ha/html/html_examples.html">Shirin HTML</a></h5> <h5 id="tools_quiz"><a href="/ha/html/html_quiz.html">Wakilci HTML</a></h5> <h5 id="tools_tutorial"><a href="/ha/html/index.html">Tutoci HTML</a></h5> </div> <div><h3><center> Ɗauka mai ɗauka </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com ɗauka ɗauka don nishaɗi da ɗan wasa, ba a gwarancin ɗimmin ɗauka ba. Risalin kwayoyin ɗan wasan da a ɗauka ɗin wannan ɗabilin ba a daidai ba. Mai hakika, a gina duk ɗaɗɗen ɗaɗɗen hakika. </p> <p id="p2"> <a href="/ha/about/index.html" title="Babban kanin CodeW3C.com">Babban kanin CodeW3C.com</a> <a href="/ha/about/about_helping.html" title="Narawa CodeW3C.com">Narawa CodeW3C.com</a> <a href="/ha/about/about_use.html" title="Babban kanin amfani">Atawararrin amfani</a> <a href="/ha/about/about_privacy.html" title="Babban kanin ɗimma">Atawararrin ɗimma</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="Kamfanin da ke da ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>