Реагируйте на Konva, blueimp-load-image uploaded Масштаб изображения - PullRequest
Новая
       67

Реагируйте на Konva, blueimp-load-image uploaded Масштаб изображения

0 голосов
/ 03 апреля 2020

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

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

Это дает мне следующее значение для img, когда pixelRatio равно 1.25:

Img value

Высота и ширина холста устанавливаются равными innerWidth и innerHeight * 1.25 (PixelRatio), что я считаю правильным. И внутри стиля находятся два значения для real innerWidth и innerHeight экрана.

Но если я выведу это изображение в элементе <KonvaImage>, правая сторона изображения будет обрезана, предположительно потому, что она только показывает первые 939 пикселей слева направо и срезы остальных. Можно ли позволить KonvaImage изменить масштаб изображения, которое он показывает правильно.

Это уже работает, если я установлю pixelRatio в loadImage равным 1, потому что тогда холст просто будет установлен в реальные значения innerWidth и innerHeight. Однако эти измененные изображения выглядят ужасно, особенно на экранах телефонов. Поэтому я хочу знать, есть ли способ масштабировать изображения с помощью KonvaImage, чтобы они выглядели хорошо и имели правильное масштабирование.

Это код JSX: 

        <Stage
          width={window.innerWidth}
          height={window.innerHeight}
        >
          <Layer>
            <KonvaImage
              image={image}
            />
          </Layer>
        </Stage>

1 Ответ

0 голосов
/ 06 апреля 2020

Konva не читает стили из сгенерированного элемента canvas. Только настоящие width и height. Вам просто нужно масштабировать изображение в соответствии с вашим пикселем. Соотношение: 

<KonvaImage
  scaleX={1 / pixelRatio}
  scaleX={1 / pixelRatio}
  image={image}
/>
...