生活随笔
收集整理的這篇文章主要介紹了
（九）使用图像数据
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
getImageData(0,0,img.width,img.height)【獲取圖片的數(shù)據(jù)，4個(gè)參數(shù)，矩形獲取數(shù)據(jù) 從00點(diǎn)開始到圖片的所有數(shù)據(jù)】
putImageData(imgData,0,0)【3個(gè)參數(shù)，1圖像數(shù)據(jù)對(duì)象，2(x)/3(y)從xy坐標(biāo)點(diǎn)開始把圖像繪制到畫布上】
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<canvas id="canvas" width="280"height="400"style="border:1px solid red;"></canvas>
<img src="../img/img.jpg" alt=""/>
<script>var canvas = document.getElementById("canvas");var img = document.images[0];img.onload = function(){if(canvas.getContext){var ctx = canvas.getContext("2d");//把圖片繪制到畫布上
ctx.drawImage(img,0,0);//獲取img的數(shù)據(jù)對(duì)象var imgData = ctx.getImageData(0,0,img.width,img.height);//獲取圖片數(shù)據(jù)對(duì)象的數(shù)據(jù)var data = imgData.data;for(var i = 0;i<data.length;i+=4){var red = data[i],green = data[i+1],blue = data[i+2],//獲得三個(gè)顏色的平均值，
average = Math.floor((red+green+blue)/3);//讓這三個(gè)像素塊的值一樣，就是灰色，只不過(guò)灰的程度不一樣而已
data[i] = average;data[i+1] = average;data[i+2] = average;}//修改圖像的數(shù)據(jù)data是一個(gè)數(shù)組
imgData.data = data;//把圖像繪制到畫布上
ctx.putImageData(imgData,0,0);}}
</script>
</body>
</html> 以上代碼運(yùn)行后的效果圖：
?
轉(zhuǎn)載于:https://www.cnblogs.com/chefweb/p/6046502.html
總結(jié)
以上是生活随笔為你收集整理的（九）使用图像数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
