您的位置：首页 > Web前端 > HTML5

HTML5画布图像数据教程

2014-01-15 20:23 393 查看

得到每个像素的图像数据在画布上的一个矩形区域,我们可以得到图像数据对象与getImageData()方法画布的背景,然后访问数据属性的像素数据。图像中每个像素的数据包含四个组件,红色,绿色,蓝色,和阿尔法组件。有三种常见的技术与图像数据对象访问像素数据。

遍历所有的像素从左上角到右下角的地区

挑选像素数据基于x,y坐标

遍历所有的像素而跟踪的x,y坐标为每个像素
注意:getImageData()方法需要的图像是托管在一个web服务器相同的域代码执行它。如果不满足此条件,将会抛出一个SECURITY_ERR异常。

<!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 = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML5画布图像数据教程

相关文章推荐

新的分享

章节导航