要获取画布上矩形区域的每个像素的图像数据，我们可以使用画布上下文的getImageData（）方法获取图像数据对象，然后从data属性访问像素数据。 图像数据中的每个像素包含四个分量，红色，绿色，蓝色和alpha分量。 使用图像数据对象访问像素数据有三种常用技术。
迭代从区域的左上角到右下角的所有像素
根据x，y坐标挑选像素数据
迭代所有像素，同时跟踪每个像素的x，y坐标
注意：getImageData（）方法要求图像托管在Web服务器上，该域与执行它的代码具有相同的域。 如果不满足此条件，将抛出SECURITY_ERR异常。
html代码：
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
function drawImage(imageObj) {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageX = 69;
var imageY = 50;
var imageWidth = imageObj.width;
var imageHeight = imageObj.height;
context.drawImage(imageObj, imageX, imageY);
var imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight);
var data = imageData.data;
// iterate over all pixels
for(var i = 0, n = data.length; i < n; i += 4) {
var red = data[i];
var green = data[i + 1];
var blue = data[i + 2];
var alpha = data[i + 3];
}
// pick out pixel data from x, y coordinate
var x = 20;
var y = 20;
var red = data[((imageWidth * y) + x) * 4];
var green = data[((imageWidth * y) + x) * 4 + 1];
var blue = data[((imageWidth * y) + x) * 4 + 2];
var alpha = data[((imageWidth * y) + x) * 4 + 3];
// iterate over all pixels based on x and y coordinates
for(var y = 0; y < imageHeight; y++) {
// loop through each column
for(var x = 0; x < imageWidth; x++) {
var red = data[((imageWidth * y) + x) * 4];
var green = data[((imageWidth * y) + x) * 4 + 1];
var blue = data[((imageWidth * y) + x) * 4 + 2];
var alpha = data[((imageWidth * y) + x) * 4 + 3];
}
}
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
</html>
1230博客
热门推荐：