🙄

[React] Safari on iOS で画像が荒くなってしまう問題のワークアラウンド

1 min read

Safari on iOS でズームなどで拡大可能な大きな画像を表示させようとすると粗く表示されてしまったりします。

元コード

  <img src={src} height={height} width={width} />

これは iOS の Safari では画像サイズを圧縮してしまうためのようです
参照: https://discussions.apple.com/thread/4975106

解決策

canvas に流し込んで表示すると圧縮されずに表示できます。
canvas の height, width には画像そのもののサイズを指定し、
transform: scale() で表示したいサイズにするのがミソです。

  const canvasRef = useRef<HTMLCanvasElement>()
  const [isLoaded setLoaded] = useState(false);
  
  const image = useMemo(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => { setLoaded(true); };
  }, []);
  
  useEffect(() => {
    if(isLoaded && canvasRef.current) {
      const ctx = canvasRef.current.getContext('2d');
      ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);
    }
  , [isLoaded, image]);
  
  return (
    <canvas 
      ref={canvasRef}
      height={image.naturalHeight}
      width={image.naturalWidth}
      style={{ transform: `scale({ height / image.naturalHeight })`;}}
    />
  );
}

Discussion

ログインするとコメントできます