자바스크립트로 이미지 모자이크 할 수 있을까요?

[intro0517 (전재훈)]

해당 이미지처럼 특정 영역을 모자이크 할 수 있는 방법이 있을까요?
모자이크 후 로컬 영역에 저장을 해도 좋고
가능하면은 서버에 바로 업로드 하고 싶습니다.

[composite]

네.

1. 편한 방법
   https://github.com/miguelmota/pixelate

2. 직접

// 모자이크 크기를 구한 뒤
var size = blocks.value / 100,
    w = canvas.width * size,
    h = canvas.height * size;

// 원본 이미지를 모자이크 크기만큼 그리기
ctx.drawImage(img, 0, 0, w, h);

// 이미지 사이즈 크기 조절 시에 대한 안티앨리어싱 끄기
ctx.msImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

// 이미지를 원본 사이즈로 다시 그리면 모자이크 완성
ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height);

3. 응용하여 원하는 부분만 처리 (1,2 공통 사항)
   이미지 중 일부만 그리면 됩니다. 간단하게 drawImage 메소드를 활용하면 됩니다.
   https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
   그리고 위치 잡고 줄이고 늘리거나 모자이크 라이브러리 이용 후 전체 이미지 캔버스에 원본 이미지 띄우고 모자이크 이미지로 덮어버리면 됩니다.

4. 서버 전송 (IE 11 및 기타 최신 브라우저 지원)
   js에서 처리한 이미지는 data:uri 에서 base64 텍스트를 추출해서 히든양식에 전송할 수도 있지만 그다지 효율적이지 않고, formData 객체에 담아 ajax 업로드하는 게 좋죠. 일단 지원되는 최신 브라우저라 치고 하면 됩니다. 참고로 캔버스로 생성한 이미지 방식은 기본적으로 png 입니다. 서버에서 png 이미지에 맞게 대응하면 됩니다.

const canvas = document.getElementById('my-canvas');
canvas.toBlob(function(blob) {
  const formData = new FormData();
  formData.append('my-file', blob, 'filename.png');

  // axios 같은 ajax 라이브러리 사용 예
  ajax.post('/api/upload', formData);
});