HTML canvas getImageData() 方法

အကြောင်းအချက်အချက်

ကိုယ်စားပြု အချက်အလက်

HTML အချက်အလက်

</a></li> <li><a href="/my/tags/tag_img.html" title="HTML <img> 标签"><img></a></li> <li><a href="/my/tags/tag_input.html" title="HTML <input> 标签"><input></a></li> <li><a href="/my/tags/tag_ins.html" title="HTML <ins> 标签"><ins></a></li> <li><a href="/my/tags/tag_kbd.html" title="HTML <kbd> 标签"><kbd></a></li> <li><a href="/my/tags/tag_label.html" title="HTML <label> 标签"><label></a></li> <li><a href="/my/tags/tag_legend.html" title="HTML <legend> 标签"><legend></a></li> <li><a href="/my/tags/tag_li.html" title="HTML <li> 标签"><li></a></li> <li><a href="/my/tags/tag_link.html" title="HTML <link> 标签"><link></a></li> <li><a href="/my/tags/tag_main.html" title="HTML <main> 标签"><main></a></li> <li><a href="/my/tags/tag_map.html" title="HTML <map> 标签"><map></a></li> <li><a href="/my/tags/tag_mark.html" title="HTML <mark> 标签"><mark></a></li> <li><a href="/my/tags/tag_menu.html" title="HTML <menu> 标签"><menu></a></li> <li><a href="/my/tags/tag_meta.html" title="HTML <meta> 标签"><meta></a></li> <li><a href="/my/tags/tag_meter.html" title="HTML <meter> 标签"><meter></a></li> <li><a href="/my/tags/tag_nav.html" title="HTML <nav> 标签"><nav></a></li> <li><a href="/my/tags/tag_noframes.html" title="HTML <noframes> 标签"><noframes></a></li> <li><a href="/my/tags/tag_noscript.html" title="HTML <noscript> 标签"><noscript></a></li> <li><a href="/my/tags/tag_object.html" title="HTML <object> 标签"><object></a></li> <li><a href="/my/tags/tag_ol.html" title="HTML <ol> 标签"><ol></a></li> <li><a href="/my/tags/tag_optgroup.html" title="HTML <optgroup> 标签"><optgroup></a></li> <li><a href="/my/tags/tag_option.html" title="HTML <option> 标签"><option></a></li> <li><a href="/my/tags/tag_output.html" title="HTML <output> 标签"><output></a></li> <li><a href="/my/tags/tag_p.html" title="HTML <p> 标签"><p></a></li> <li><a href="/my/tags/tag_param.html" title="HTML <param> 标签"><param></a></li> <li><a href="/my/tags/tag_picture.html" title="HTML <picture> 标签"><picture></a></li> <li><a href="/my/tags/tag_pre.html" title="HTML <pre> 标签"><pre></a></li> <li><a href="/my/tags/tag_progress.html" title="HTML <progress> 标签"><progress></a></li> <li><a href="/my/tags/tag_q.html" title="HTML <q> 标签"><q></a></li> <li><a href="/my/tags/tag_rp.html" title="HTML <rp> 标签"><rp></a></li> <li><a href="/my/tags/tag_rt.html" title="HTML <rt> 标签"><rt></a></li> <li><a href="/my/tags/tag_ruby.html" title="HTML <ruby> 标签"><ruby></a></li> <li><a href="/my/tags/tag_s.html" title="HTML <s> 标签"><s></a></li> <li><a href="/my/tags/tag_samp.html" title="HTML <samp> 标签"><samp></a></li> <li><a href="/my/tags/tag_script.html" title="HTML <script> 标签"><script></a></li> <li><a href="/my/tags/tag_search.html" title="HTML <search> 标签"><search></a></li> <li><a href="/my/tags/tag_section.html" title="HTML <section> 标签"><section></a></li> <li><a href="/my/tags/tag_select.html" title="HTML <select> 标签"><select></a></li> <li><a href="/my/tags/tag_small.html" title="HTML <small> 标签"><small></a></li> <li><a href="/my/tags/tag_source.html" title="HTML <source> 标签"><source></a></li> <li><a href="/my/tags/tag_span.html" title="HTML <span> 标签"><span></a></li> <li><a href="/my/tags/tag_strike.html" title="HTML <strike> 标签"><strike></a></li> <li><a href="/my/tags/tag_strong.html" title="HTML <strong> 标签"><strong></a></li> <li><a href="/my/tags/tag_style.html" title="HTML <style> လက်တင်"><style></a></li> <li><a href="/my/tags/tag_sub.html" title="HTML <sub> လက်တင်"><sub></a></li> <li><a href="/my/tags/tag_summary.html" title="HTML <summary> လက်တင်"><summary></a></li> <li><a href="/my/tags/tag_sup.html" title="HTML <sup> လက်တင်"><sup></a></li> <li><a href="/my/tags/tag_svg.html" title="HTML <svg> လက်တင်"><svg></a></li> <li><a href="/my/tags/tag_table.html" title="HTML <table> လက်တင်"><table></a></li> <li><a href="/my/tags/tag_tbody.html" title="HTML <tbody> လက်တင်"><tbody></a></li> <li><a href="/my/tags/tag_td.html" title="HTML <td> လက်တင်"><td></a></li> <li><a href="/my/tags/tag_template.html" title="HTML <template> လက်တင်"><template></a></li> <li><a href="/my/tags/tag_textarea.html" title="HTML <textarea> လက်တင်"><textarea></a></li> <li><a href="/my/tags/tag_tfoot.html" title="HTML <tfoot> လက်တင်"><tfoot></a></li> <li><a href="/my/tags/tag_th.html" title="HTML <th> လက်တင်"><th></a></li> <li><a href="/my/tags/tag_thead.html" title="HTML <thead> လက်တင်"><thead></a></li> <li><a href="/my/tags/tag_time.html" title="HTML <time> လက်တင်"><time></a></li> <li><a href="/my/tags/tag_title.html" title="HTML <title> လက်တင်"><title></a></li> <li><a href="/my/tags/tag_tr.html" title="HTML <tr> လက်တင်"><tr></a></li> <li><a href="/my/tags/tag_track.html" title="HTML <track> လက်တင်"><track></a></li> <li><a href="/my/tags/tag_tt.html" title="HTML <tt> လက်တင်"><tt></a></li> <li><a href="/my/tags/tag_u.html" title="HTML <u> လက်တင်"><u></a></li> <li><a href="/my/tags/tag_ul.html" title="HTML <ul> လက်တင်"><ul></a></li> <li><a href="/my/tags/tag_var.html" title="HTML <var> လက်တင်"><var></a></li> <li><a href="/my/tags/tag_video.html" title="HTML <video> လက်တင်"><video></a></li> <li><a href="/my/tags/tag_wbr.html" title="HTML <wbr> လက်တင်"><wbr></a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/my/howto/index.html" title="CodeW3C.com ဘောင်းတုံ">CodeW3C.com ဘောင်းတုံ</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="/my/tags/html_ref_canvas.html">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="/my/tags/canvas_imagedata_data.html" title="HTML canvas data လက်တင်">data</a> အချက်အလက်များကို အသုံးပြုလျှင်</p> <p class="tip"><span>အကြောင်းကြားချက်:</span>color/alpha အချက်အလက်များကို လုပ်ဆောင်ပြီးသည့် အခါ၌ သင် ပြုံစံအချက်အလက်များကို အသုံးပြုနိုင်ပါသည် <a href="/my/tags/canvas_putimagedata.html" title="HTML canvas putImageData() စမ်းသပ်">putImageData()</a> ပုံစံကို ဖန်တီးပြီး လက်မှတ်ပုံပေါင်းသို့ ပြုပြင်ပေးသည်。</p> <h3>ဘာသာပြန်:</h3> <p>အောက်ပါ ကို အသုံးပြုလျှင် ပြန်လည်သတင်းပေးသော ImageData အား ပထမ ပိုင်းပုံစံ/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="/my/tiy/t.html?f=eg_html5_canvas_getimagedata_firstpx">ကိုယ်တိုင် ကျင်းပ</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() ကို အသုံးပြု၍ ပုံရိုက် ပေါ်ရှိ အမှတ်အသား တချို့ အမှတ်အသား အချက်အလက် ကို ပြန်လည် ပြုလုပ်၍ ပုံရိုက် ပေါ်သို့ ပြန်ပို့စေသည်။</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="/my/tiy/t.html?f=eg_html5_canvas_getimagedata">ကိုယ်တိုင် ကျင်းပ</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>ပြန်လည် ပြုလုပ် သည့် ဟန်ချက် အရှေ့ဘက် အခြေခံ ခွဲခ�ားချက်</td> </tr> <tr> <td><i>y</i></td> <td>ပြန်လည် ပြုလုပ် သည့် ဟန်ချက် အရှေ့ဘက် အမြောက် အခြေခံ ခွဲခြားချက်</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="တီလိုပ်" style="margin-left:10px;" /> <p>getImageData() ကို အပ်ဘား ပုံရိုက် ပေါ်ရှိ အမှတ်အသား တချို့ အရေးအသား ကို ပြန်လည် ပြောင်းလဲစေသည်။</p> <canvas id="myCanvas2" width="450" height="300" style="border:1px solid #d3d3d3;background:#ffffff; margin-top:15px;"> သင့် ဘရောက်သုတ် က အီလက်ထရောနစ်5 ကျပ်စ် ဂရမ်ဂျက် ကို ထောက်ပံ့ခြင်း မ မရှိပါ။ </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>; ပြန်လည် အရေးအသား 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="/my/tiy/t.html?f=eg_html5_canvas_getimagedata_firstpx">ကိုယ်တိုင် ကျင်းပ</a></p> </div> <div> <h2>ဘာသာ အပြောရှင်</h2> <p>အချက်အလက် အရာများ သည် ထို လက်တင် ကို ပထမဆုံး အပြောရှင် ဘာသာ ကို ပေးသော ဘာသာ ကို ညွှန်ပြသည်。</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>မှတ်ချက်：</span>Internet Explorer 8 နှင့် ပိုမိုကြိုးစား ပြီး <canvas> အချက်အလက် မမှောက်ရှိပါ။</p> </div> <div class="backtoreference"> <p><a href="/my/tags/html_ref_canvas.html">HTML5 Canvas လက်တင်ကြေညာ</a></p> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> အက်ိုင်အချုပ် </center><h3> <h5 id="tools_reference"><a href="/my/tags/index.html">HTML လက်တင်ကြေညာ</a></h5> <h5 id="tools_example"><a href="/my/html/html_examples.html">HTML အမှတ်ပြ</a></h5> <h5 id="tools_quiz"><a href="/my/html/html_quiz.html">HTML စမ်းသပ်</a></h5> <h5 id="tools_tutorial"><a href="/my/html/index.html">HTML ဖိုင်ပျိုး</a></h5> </div> <div><h3><center> ပံ့ပိုးစား လက်တင် </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com ဖြစ်သော ပြည့်ပြည့်သော အသုံးပြုမှု ကျယ်ပြီး သတင်းအချက် အချို့သည် မသိမြင်ရသေးပါ။ အိမ်ဌာန် အသုံးပြုမှု ဖြစ်သော အန္တရာယ်များ သည် အိမ်ဌာန် နှင့် မတူညီပါ။ အခွင့်အရေး မှာ ပိုင်ဆိုင်မှု ရှိပြီး အခွင့်အရေး အားလုံး အတွက် ကယ်တင်ရန် လုပ်ဆောင်ပါ။ </p> <p id="p2"> <a href="/my/about/index.html" title="နှင့် CodeW3C.com">နှင့် CodeW3C.com</a> <a href="/my/about/about_helping.html" title="ကူညီရာ CodeW3C.com">ကူညီရာ CodeW3C.com</a> <a href="/my/about/about_use.html" title="အသုံးပြုခြင်း">အသုံးပြုခြင်း ပြုအား</a> <a href="/my/about/about_privacy.html" title="သတင်းအချက်">သတင်းအချက် ပြုအား</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="စွမ်းဆောင်ရေးလုပ်ငန်းပေးသည် Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>