canvas 图片反色
生活随笔
收集整理的這篇文章主要介紹了
canvas 图片反色
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
代碼實(shí)例：
<!DOCTYPE HTML> <html> <head><meta charset="utf-8"><title>圖片反色</title><style type="text/css">body{ background:black;}#c1{ background:white;}</style><script type="text/javascript">window.οnlοad=function(){var oC=document.getElementById('c1');var oGC=oC.getContext('2d');var oImg=new Image();oImg.οnlοad=function()//圖片預(yù)加載后才可以操作{draw(this);}oImg.src='1.PNG';function draw(obj){oC.width=obj.width;//將畫布設(shè)為圖片寬的一倍oC.height=obj.height*2;//將畫布設(shè)為圖片高的兩倍，以用來(lái)倒影oGC.drawImage(obj,0,0);//將圖片畫在畫布上var newImg=oGC.getImageData(0,0,obj.width,obj.height);//得到圖片數(shù)據(jù)var ONewImg = oGC.createImageData(obj.width,obj.height);//重要。要?jiǎng)?chuàng)建新的圖片數(shù)據(jù)再將原來(lái)的反色后色數(shù)據(jù)賦值，// 如果直接在原數(shù)據(jù)上操作數(shù)據(jù)會(huì)導(dǎo)致數(shù)據(jù)覆蓋而得不到結(jié)果for(var i=0;i<newImg.height;i++){for(var j=0;j<newImg.width;j++){var color = getXY(newImg,j,i);//得到原來(lái)圖片數(shù)據(jù)，一個(gè)像素有四個(gè)值，分別代表rgbavar result = [];result[0] = 255 - color[0];result[1] = 255 - color[1];result[2] = 255 - color[2];result[3] = 255*i/newImg.height;setXY(ONewImg,j,newImg.height-i,result);//設(shè)置到新的數(shù)據(jù)里面}}oGC.putImageData(ONewImg,0,obj.height);//將圖片數(shù)據(jù)設(shè)置到畫布中}//獲取rgbafunction getXY(obj,x,y){var w=obj.width;var h=obj.height;var data=obj.data;var color=[];color.push(data[(y*w+x)*4]);color.push(data[(y*w+x)*4+1]);color.push(data[(y*w+x)*4+2]);color.push(data[(y*w+x)*4+3]);return color;}//設(shè)置rgbafunction setXY(obj,x,y,color){var w=obj.width;var h=obj.height;var data=obj.data;data[(y*w+x)*4]=color[0];data[(y*w+x)*4+1]=color[1];data[(y*w+x)*4+2]=color[2];data[(y*w+x)*4+3]=color[3];}}</script> </head><body> <canvas id="c1" width="500" height="500"></canvas> </body> </html>圖片：
效果：
?
?
2017-09-09?? 22:40:39
轉(zhuǎn)載于:https://www.cnblogs.com/guangzhou11/p/7499594.html
總結(jié)
以上是生活随笔為你收集整理的canvas 图片反色的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 20170907wdVBA_GetCel
- 下一篇： 卡尔曼滤波的推导