브라우저에서 안티앨리어싱 없이 이미지를 늘리는 방법은 무엇입니까?

브라우저에서 앤티앨리어싱 없이 이미지 늘리기

픽셀 아트 영역에서 선명한 가장자리를 유지하면서 이미지를 더 큰 크기로 늘리는 것은 도전. 크기 조정 알고리즘은 원치 않는 앤티앨리어싱을 도입하여 선명한 선을 흐리게 하고 원하는 미학을 손상시키는 경우가 많습니다.

이 문제를 해결하기 위해 다음을 포함한 여러 가지 방법이 모색되었습니다.

CSS 기술

CSS, JavaScript, HTML을 사용한 초기 시도는 효과적이지 않았으며 안티앨리어싱으로 인해 이미지가 흐려졌습니다. 그러나 새로운 CSS 속성이 솔루션으로 등장했습니다.

image-rendering: pixelated;

이 속성은 앤티앨리어싱을 비활성화하여 이미지를 선명하고 픽셀화된 모양으로 만듭니다. Chrome, Firefox, 심지어 IE7-8과 같은 최신 브라우저에서도 잘 작동합니다.

캔버스 접근 방식

이미지 렌더링을 지원하지 않는 브라우저의 경우 더 복잡한 Canvas API를 사용하는 접근 방식을 사용할 수 있습니다. 다음은 소스 이미지에서 픽셀을 복사하고 지정된 요소로 크기를 조정하는 JavaScript 코드 조각입니다.

var img = new Image();
img.src = ...;
img.onload = function() {

    // Define scaling factor
    var scale = 8;

    // Create an off-screen canvas to hold the source image
    var src_canvas = document.createElement('canvas');
    src_canvas.width = this.width;
    src_canvas.height = this.height;

    // Draw the source image to the off-screen canvas
    var src_ctx = src_canvas.getContext('2d');
    src_ctx.drawImage(this, 0, 0);

    // Get pixel data from the source canvas
    var src_data = src_ctx.getImageData(0, 0, this.width, this.height).data;

    // Create an on-screen canvas to display the scaled image
    var dst_canvas = document.getElementById('canvas');
    dst_canvas.width = this.width * scale;
    dst_canvas.height = this.height * scale;
    var dst_ctx = dst_canvas.getContext('2d');

    // Copy pixels from the source canvas to the on-screen canvas while scaling
    var offset = 0;
    for (var y = 0; y < this.height; ++y) {
        for (var x = 0; x < this.width; ++x) {
            var r = src_data[offset++];
            var g = src_data[offset++];
            var b = src_data[offset++];
            var a = src_data[offset++] / 100.0;
            dst_ctx.fillStyle = 'rgba(' + [r, g, b, a].join(',') + ')';
            dst_ctx.fillRect(x * scale, y * scale, scale, scale);
        }
    }
};

이 방법은 픽셀 단위로 완벽한 크기 조정을 제공하고 이미지의 원래 선명한 가장자리를 유지합니다.

위 내용은 브라우저에서 안티앨리어싱 없이 이미지를 늘리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!