JavaScript 캔버스를 사용하여 크기가 조정된 이미지 다듬기

HTML 캔버스를 사용하여 이미지 크기를 조정하면 웹 애플리케이션 내에서 시각적 개체를 조작하는 편리한 방법을 제공합니다. 그러나 기본 크기 조정 알고리즘을 사용하면 이미지가 픽셀화되거나 들쭉날쭉해져서 이미지 편집 소프트웨어에서 볼 수 있는 부드러움이 부족할 수 있습니다. 이 문제는 이미지 평활화 기술을 통합하여 해결할 수 있습니다.

부드러움을 달성하는 한 가지 접근 방식은 단계별 축소입니다. 이 방법에는 더 작은 증분을 사용하여 점차적으로 이미지 크기를 조정하는 작업이 포함됩니다. 예를 들어 원본 이미지의 크기를 직접 50%로 조정하는 대신 먼저 75%로 줄이고 그 다음에는 62.5% 등으로 줄일 수 있습니다. 이 증분 방식은 픽셀 보간의 영향을 줄여 더 부드러운 결과를 제공합니다.

var oc = document.createElement('canvas'),
    octx = oc.getContext('2d');

oc.width = img.width * 0.5;
oc.height = img.height * 0.5;
octx.drawImage(img, 0, 0, oc.width, oc.height);

// ...

ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);

또 다른 방법은 Chrome과 같은 최신 브라우저에서 지원되는 imageSmoothingQuality 속성을 설정하는 것입니다. 이 속성은 이미지 크기 조정에 사용되는 보간 알고리즘을 제어합니다. 이를 "높음"으로 설정하면 브라우저가 고급 쌍삼차 보간 방법으로 전환하여 이미지 부드러움을 향상할 수 있습니다.

canvas.getContext('2d', { imageSmoothingQuality: "high" });

단계적으로 축소를 활용하거나 이미지 스무딩 품질을 조정하면 개발자가 JavaScript 캔버스로 크기가 조정된 이미지의 모양을 향상시켜 시각적으로 매력적인 결과를 얻을 수 있습니다.