[Canvas] 픽셀 단위 RGB 변환

grayscale

function grayscale() {
    context.drawImage(imgElm, 0, 0);
    const imgData = context.getImageData(0, 0, imgElm.width, imgElm.height);
    const data = imgData.data;
    for (let i = 0; i < data.length; i += 4) {
        const gray = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = gray;
        data[i + 1] = gray;
        data[i + 2] = gray;
    }
    context.putImageData(imgData, 0, 0);
}

---

sepia

function sepia() {
    context.drawImage(imgElm, 0, 0);
    const imgData = context.getImageData(0, 0, imgElm.width, imgElm.height);
    const data = imgData.data;

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        const rSepia = 0.393 * r + 0.769 * g + 0.189 * b;
        const gSepia = 0.349 * r + 0.686 * g + 0.168 * b;
        const bSepia = 0.272 * r + 0.534 * g + 0.131 * b;

        data[i] = rSepia;
        data[i + 1] = gSepia;
        data[i + 2] = bSepia;
    }
    context.putImageData(imgData, 0, 0);
}

---

invert

function invert() {
    context.drawImage(imgElm, 0, 0);
    const imgData = context.getImageData(0, 0, imgElm.width, imgElm.height);
    const data = imgData.data;

    for (let i = 0; i < data.length; i += 4) {
        data[i] = 255 - data[i];
        data[i + 1] = 255 - data[i + 1];
        data[i + 2] = 255 - data[i + 2];
    }
    context.putImageData(imgData, 0, 0);
}

---

controlBtn

function clickHandler(e) {
    colorValue = e.target.getAttribute('data-type');
    switch (colorValue) {
        case 'original':
            return original();
        case 'grayscale':
            return grayscale();

        case 'invert':
            return invert();

        case 'sepia':
            return sepia();
    }
}

---

참고 - MDN Pixel Manipulation