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

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

앤티앨리어싱 없이 이미지를 늘리는 것은 특히 픽셀 아트를 다룰 때 웹 개발자가 직면하는 일반적인 과제입니다. . 전통적으로 CSS, JavaScript, HTML과 같은 방법을 사용하여 이미지를 늘렸지만 안티앨리어싱으로 인해 바람직하지 않은 흐림 현상이 발생하는 경우가 많습니다.

CSS 및 최신 브라우저

최신 버전의 Chrome 및 Firefox에는 이미지 렌더링이라는 새로운 CSS 속성이 도입되었습니다. 이 속성을 픽셀화로 설정하면 이미지를 늘릴 때 앤티앨리어싱을 비활성화할 수 있습니다. 그러나 이 방법은 Chrome과 FF에서 지원이 중단되었기 때문에 아직 신뢰할 수 없습니다.

캔버스 기반 솔루션

캔버스 API는 이미지 스트레칭을 위한 솔루션을 제공합니다. 안티앨리어싱 없이. 아래 코드는 캔버스에서 크기가 조정된 이미지를 생성하는 방법을 보여줍니다.

<code class="javascript">var img = new Image();
img.onload = function() {

    var scale = 8;

    var src_canvas = document.createElement('canvas');
    src_canvas.width = this.width;
    src_canvas.height = this.height;

    var src_ctx = src_canvas.getContext('2d');
    src_ctx.drawImage(this, 0, 0);
    var src_data = src_ctx.getImageData(0, 0, this.width, this.height).data;

    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');

    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);
        }
    }
};</code>

이 코드는 소스 이미지의 픽셀 데이터를 크기가 조정된 대상 캔버스에 복사하여 앤티앨리어싱 없이 이미지를 효과적으로 늘립니다.

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