HTML5 Canvas를 사용하여 브라우저에서 고품질 이미지 축소를 달성하는 방법은 무엇입니까?

고품질을 위해 브라우저에서 이미지 축소(다운샘플)

Reduxrespot:

브라우저에서 이미지를 축소할 때 html5 캔버스 요소를 사용하면 이미지 품질이 매우 낮다는 것을 알았습니다. 몇 가지 조사 끝에 <캔버스>에서 보간을 비활성화하면 품질이 향상되지만 여전히 최상의 결과를 얻지 못하는 것으로 나타났습니다.

모범 사례

단일 단계 다운샘플링

큰 이미지를 작은 크기로 줄여야 하는 상황에 권장됩니다. 이미지 단일 단계 다운샘플링을 사용합니다. 단계는 다음과 같습니다.

1. drawImage() 메서드를 사용하여 원본 이미지를 축소된 크기의 캔버스에 그립니다.
2. 축소된 이미지의 데이터를 얻으려면 getImageData()를 사용하세요.
3. putImageData()를 사용하여 축소된 데이터를 새 캔버스에 그립니다.

다음 코드 예제로 달성:

const originalImage = new Image();
originalImage.onload = () => {
  const originalCanvas = document.createElement('canvas');
  originalCanvas.width = desiredWidth;
  originalCanvas.height = desiredHeight;
  const originalCtx = originalCanvas.getContext('2d');
  originalCtx.drawImage(originalImage, 0, 0, desiredWidth, desiredHeight);

  const scaledData = originalCtx.getImageData(0, 0, desiredWidth, desiredHeight);
  const scaledCanvas = document.createElement('canvas');
  scaledCanvas.width = desiredWidth;
  scaledCanvas.height = desiredHeight;
  const scaledCtx = scaledCanvas.getContext('2d');
  scaledCtx.putImageData(scaledData, 0, 0);
};

다단계 다운샘플링

한 단계 다운샘플링으로 품질이 충분하지 않은 경우 , 다단계 다운샘플링을 사용할 수 있습니다. 이는 더 작은 비율을 사용하여 단일 단계 다운샘플링을 반복적으로 수행함으로써 달성됩니다.

다음은 2단계 다운샘플링의 코드 예입니다.

const originalImage = new Image();
originalImage.onload = () => {
  // 第一步：缩小 50%
  const firstCanvas = document.createElement('canvas');
  firstCanvas.width = originalImage.width / 2;
  firstCanvas.height = originalImage.height / 2;
  const firstCtx = firstCanvas.getContext('2d');
  firstCtx.drawImage(originalImage, 0, 0, firstCanvas.width, firstCanvas.height);

  // 第二步：缩小 50%
  const secondCanvas = document.createElement('canvas');
  secondCanvas.width = firstCanvas.width / 2;
  secondCanvas.height = firstCanvas.height / 2;
  const secondCtx = secondCanvas.getContext('2d');
  secondCtx.drawImage(firstCanvas, 0, 0, secondCanvas.width, secondCanvas.height);

  const finalImage = new Image();
  finalImage.src = secondCanvas.toDataURL();
};

흐림 문제

다단계 다운샘플링으로 인해 이미지가 흐려질 수 있습니다. 이 문제를 해결하려면 다음 기술을 사용할 수 있습니다.

• 이미지 선명화: 컨벌루션 필터 또는 기타 선명화 기술을 사용하여 이미지 가장자리를 향상할 수 있습니다.
• 더 높은 품질의 보간 알고리즘 사용: 예를 들어 쌍선형 또는 쌍삼차 보간은 최근접 이웃 보간보다 더 나은 품질을 제공할 수 있습니다.
• 더 작은 단계로 다운샘플링 수행: 예를 들어 2단계 다운샘플링 대신 각 단계에서 크기를 50씩 줄이는 3단계 다운샘플링을 수행합니다. 각 단계마다 크기가 33%씩 줄어듭니다. % .

위 내용은 HTML5 Canvas를 사용하여 브라우저에서 고품질 이미지 축소를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!