canvas.toBlob이 IOS에서 null을 반환 받는 경우

회사에서 react-easy-crop 라이브러리와 canvas API를 사용하다가 IOS에서만 zoom이 1이하인 경우에 canvas.toBlob이 null을 반환받는 현상을 발견했다.

이런저런 방법을 찾아보다 gpt 친구에게 물어보니 ios에선 메모리 제한에 걸려 null을 반환받을 수 있다는 답변을 받고 캔버스 크기를 확인해 보니, 특정 zoom 이하인 경우에는 캔버스 크기가 무지막지하게 커져있었다.

GPT답변 iOS에서 매우 높은 해상도나 대형 캔버스를 사용할 경우 메모리 제한으로 인해 빈 이미지를 생성할 수 있습니다. 이를 해결하려면 캔버스 크기를 줄이거나, 이미지 해상도를 낮추어 메모리 사용량을 줄이는 것이 좋습니다.

해결법은 상당히 간단하다. 이미지 해상도를 낮추거나 캔버스 크기를 줄이면된다. 우리 서비스는 이미지 해상도가 중요하니 캔버스 크기를 zoom만큼 줄이는 방법으로 수정했다.

const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
newImage.src = imagePath;
newImage.onload = () => {
  const scalefactor = Math.min(zoom, 1);
  
  canvas.width = width * scalefactor;
  canvas.height = height * scalefactor;
  
  ctx.scale(scalefactor, scalefactor);
  ctx.drawImage(newImage, 0, 0);

  canvas.toBlob((blob) => {
    ...로직
  }, 'image/png');
};