html:
<body>
<canvas id="c" width="300" height="250"></canvas>
<label
><input
type="radio"
value="颜色翻转"
name="color"
id="c1"
/>颜色翻转</label
>
<label><input value="灰度" type="radio" name="color" id="" />灰度 </label>
<label><input value="正常" type="radio" name="color" id="" />正常</label>
</body>
图片素材:
js:
var img = new Image();
img.crossOrigin = 'anonymous';
img.src = '../imgs/pic.png';
const c = document.getElementById('c');
const ctx = c.getContext('2d');
img.onload = function () {
ctx.drawImage(img, 0, 0);
};
var original = () => {
ctx.drawImage(img, 0, 0);
};
// 颜色翻转
var invert = () => {
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, c.width, c.height);
const data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // red
data[i + 1] = 255 - data[i + 1]; // green
data[i + 2] = 255 - data[i + 2]; // blue
}
ctx.putImageData(imageData, 0, 0);
};
// 灰度
var grayscale = () => {
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, c.width, c.height);
const data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // red
data[i + 1] = avg; // green
data[i + 2] = avg; // blue
}
ctx.putImageData(imageData, 0, 0);
};
const inputs = document.querySelectorAll('[name=color]');
for (const input of inputs) {
input.addEventListener('change', function (e) {
switch (e.target.value) {
case '颜色翻转':
return invert();
case '灰度':
return grayscale();
default:
return original();
}
});
}
效果：
大致思路：
就是取出当前图片的每个像素点的rgb值，对其进行取平均值和取反值得操作。
