转化一个图像的颜色与HTML5画布,我们可以遍历图像中所有的像素和转化的红,绿,蓝组件通过从马克斯颜色值减去每个组件,255。接下来,我们可以使用更新后的图像数据绘制实像与putImageData()方法,它要求图像数据数组和一个位置。
注意:getImageData()方法需要的图像是托管在一个web服务器相同的域代码执行它。如果不满足此条件,将会抛出一个SECURITY_ERR异常。
注意: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 x = 69;
var y = 50;
context.drawImage(imageObj, x, y);
var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
// red
data[i] = 255 - data[i];
// green
data[i + 1] = 255 - data[i + 1];
// blue
data[i + 2] = 255 - data[i + 2];
}
// overwrite original image
context.putImageData(imageData, x, y);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
</html>