[JS]첨부파일 이미지 canvas에서 픽셀 모자이크화 시키기

See the Pen input file to mosaic pixel canvas by Oh Ikmyeong (@dpffpself) on CodePen.

HTML

    <label>
        <span>원하는 이미지를 첨부하세요</span>
        <input type="file" id="ipt-file" accept="image/*" />
    </label>
    <label>
        <span>픽셀 사이즈 조정</span>
        <input type="number" id="ipt-size" value="10" min="1" />
    </label>
    <div class="cv-wrap">
        <canvas id="cv"></canvas>
    </div>

CSS

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        body {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            gap: 10px;
            min-height: 100vh;
            padding: 40px 0;
            background: #ccc;
        }
 
        .cv-wrap {
            position: relative;
            width: 80%;
            max-width: 600px;
            background: #fff;
        }
 
        #cv {
            width: 100%;
            height: 100%;
        }

JS

const $file = document.getElementById("ipt-file");
const $cv = document.getElementById("cv");
const $size = document.getElementById("ipt-size");
const ctx = $cv.getContext("2d");
let lastChangeEvent = null;
 
/* 첨부파일 받기 시작할때 */
$file.addEventListener("change", on_file_change);
 
/* 픽셀 사이즈 조정할때 */
$size.addEventListener("change", () => {
    if (!lastChangeEvent) { return console.warn("파일 정보 없음"); }
    on_file_change(lastChangeEvent);
});
 
/**
    * 첨부파일 전달 받았을때
    * @memo file > base64 > Image > canvas
    * */
function on_file_change(e) {
    const file = e.target.files[0];
    if (!file) {
        lastChangeEvent = null;
        return console.warn("no file");
    }
    lastChangeEvent = e;
    const reader = new FileReader();
    reader.readAsDataURL(file);
 
    reader.onload = (evt) => {
        const $img = new Image();
        $img.src = evt.target.result;
        $img.onload = () => {
            $cv.width = $img.width;
            $cv.height = $img.height;
            draw_pixelated($img, Math.max(1, $size.valueAsNumber));
        }//onload:img
    }//onload:reader
}//on_file_change
 
/**
    * 캔버스에 그리기 시작
    * */
function draw_pixelated($img, pixelSize) {
    const w = $cv.width;
    const h = $cv.height;
    const smallW = Math.ceil(w / pixelSize);
    const smallH = Math.ceil(h / pixelSize);
 
    //픽셀 느낌 나게
    ctx.imageSmoothingEnabled = false;
 
    //작은 해상도로 그리고
    ctx.drawImage($img, 0, 0, smallW, smallH);
 
    //다시 확대
    ctx.drawImage($cv, 0, 0, smallW, smallH, 0, 0, w, h);
}//draw_pixelated