Щоб перетворити кольорове зображення на чорно-біле за допомогою JavaScript використовується елемент img та canvas та об'єкт CanvasRenderingContext2D.
За допомогою метода drawImage() малюємо зображення на полотні canvas.
Щоб конвертувати кольорове зображення у чорно-біле необхідно пройтися по кожному пікселю зображення. За допомогою getImageData() отримуємо дані пікселів з полотна. Кожні дані пікселів (RGBA колір) конвертуємо у чорно-білий відтінок. Зроблені зміни над пікселями малюємо на полотні за допомогою метода putImageData().
Якщо є необхідність зображення з полотна відобразити в елементі img потрібно скористатися методом canvas.toDataURL().
Відтінок сірого
Для конвертації пікселя у відтінок сірого використовуємо формулу: 0.2126*R + 0.7152*G + 0.0722*B
<img id="images" src="/dani/test.png">
let img=document.getElementById('images');
let canvas=document.getElementById('canvas');
let contex=canvas.getContext('2d');
canvas.width = img.naturalWidth || img.width;
canvas.height = img.naturalHeight || img.height;
contex.drawImage(img, 0, 0);
const imageData = contex.getImageData(0, 0, canvas.width, canvas.height);
for(let i=0, r,g,b; i<imageData.data.length; i+=4){
r = imageData.data[i];
g = imageData.data[i+1];
b = imageData.data[i+2];
imageData.data[i] = imageData.data[i+1] = imageData.data[i + 2] = 0.2126*r + 0.7152*g + 0.0722*b;
}
contex.putImageData(imageData, 0, 0);
Середнє значення кольорів
Отримавши середнє значення кольору пікселя за формулою (R + G + B), отримуємо сірий колір пікселя.
let img=document.getElementById('images');
let canvas=document.getElementById('canvas2');
let contex=canvas.getContext('2d');
canvas.width = img.naturalWidth || img.width;
canvas.height = img.naturalHeight || img.height;
contex.drawImage(img, 0, 0);
const imageData = contex.getImageData(0, 0, canvas.width, canvas.height);
for(let i=0, r,g,b; i<imageData.data.length; i+=4){
r = imageData.data[i];
g = imageData.data[i+1];
b = imageData.data[i+2];
imageData.data[i] = imageData.data[i + 1] = imageData.data[i + 2] =(r+g+b)/3;
}
contex.putImageData(imageData, 0, 0);
Чорний, білий і сірий
Для визначення якого кольору буде піксель визначаємо суму RGB пікселя. З отриманої суми визначаємо колір пікселя: від 0 до 765.
- Розділяємо на три кольора:
- 0-255 - чорний
- 256-510 - сірий
- 511-765 - білий
let img=document.getElementById('images');
let canvas=document.getElementById('canvas3');
let contex=canvas.getContext('2d');
canvas.width = img.naturalWidth || img.width;
canvas.height = img.naturalHeight || img.height;
contex.drawImage(img, 0, 0);
const imageData = contex.getImageData(0, 0, canvas.width, canvas.height);
for(let i=0; i<imageData.data.length; i+=4){
let count=imageData.data[i]+imageData.data[i+1]+imageData.data[i+2]; //count=r+g+b
let color;
switch(true){
case count<=255:
default:
color=0; //колір чорний
break;
case (count>255 && count<=510):
color=133; //сірий колір
break;
case (count>510):
color=255; //колір білий
break;
}
imageData.data[i] = imageData.data[i+1]=imageData.data[i+2]=color; //r,g,b пікселя =color
imageData.data[i+3]=255; //альфа
}
contex.putImageData(imageData, 0, 0);