Реагируйте на масштабирование blueimp-load-image загруженного изображения

Question

Я использую пакет blueimp-load-image package для загрузки изображения в моём приложении реакции. Изображение должно быть изменено и затем помещено в холст.

Это мой код, который обрабатывает загрузку. Это может быть только изображение.

  const handleImageUpload = e => {
    const [file] = e.target.files;
    if (file) {
      loadImage(
        file,
        img => {
          setImage(img);
          changeOffset(img);
        },
        {
          orientation: true,
          maxWidth: innerWidth,
          maxHeight: innerHeight,
          downsamplingRatio: 0.25,
          pixelRatio: window.devicePixelRatio,
          imageSmoothingEnabled: true,
          imageSmoothingQuality: 'high',
          canvas: false,
          contain: true,
        }
      );
    }
  };

IMG помещается в переменную состояния, которая отображается на моем холсте (для этого я использую KonvaImage из response-konva). Моя проблема в том, что если я не использую pixelRatio: window.devicePixelRatio , изображение отображается правильно, но качество оставляет желать лучшего. Однако если я использую pixelRatio: window.devicePixelRatio , изображение будет увеличено.

Если я выйду из img внутри loadImage, это будет вывод. Первый без pixelRatio, второй с pixelRatio.

Это как выглядит изображение на экране (снова первое без pixelRation, второе с pixelRatio):

Я надеюсь, что кто-нибудь может помочь мне с моей проблемой. Конечно, я также был бы открыт для другого способа изменения размера изображений, если он работает лучше.

Заранее спасибо!