生活随笔
收集整理的這篇文章主要介紹了
（九）使用图像数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
getImageData(0,0,img.width,img.height)【獲取圖片的數據，4個參數，矩形獲取數據 從00點開始到圖片的所有數據】
putImageData(imgData,0,0)【3個參數，1圖像數據對象，2(x)/3(y)從xy坐標點開始把圖像繪制到畫布上】
<!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的數據對象var imgData = ctx.getImageData(0,0,img.width,img.height);//獲取圖片數據對象的數據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],//獲得三個顏色的平均值，
average = Math.floor((red+green+blue)/3);//讓這三個像素塊的值一樣，就是灰色，只不過灰的程度不一樣而已
data[i] = average;data[i+1] = average;data[i+2] = average;}//修改圖像的數據data是一個數組
imgData.data = data;//把圖像繪制到畫布上
ctx.putImageData(imgData,0,0);}}
</script>
</body>
</html> 以上代碼運行后的效果圖：
?
轉載于:https://www.cnblogs.com/chefweb/p/6046502.html
總結
以上是生活随笔為你收集整理的（九）使用图像数据的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
