React Konva，blueimp-load-image 上传图像重新缩放答案

【问题标题】：React Konva, blueimp-load-image uploaded Image rescalingReact Konva，blueimp-load-image 上传图像重新缩放
【发布时间】：2020-04-03 18:42:15
【问题描述】：

我正在尝试在 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,
        }
      );
    }
  };

当 pixelRatio 为 1.25 时，这给了我以下 img 值：

画布的高度和宽度设置为 innerWidth 和 innerHeight * 1.25 (PixelRatio)，我认为这是正确的。而样式里面是屏幕的真实innerWidth和innerHeight这两个值。

但是如果我在 <KonvaImage> 元素中输出这个 img，图片的右侧会被截断，大概是因为它只显示了从左到右的前 939 个像素，其余部分被截断。是否可以让 KonvaImage 重新缩放它正确显示的图片。

如果我将 loadImage 中的 pixelRatio 设置为 1，它已经可以工作了，因为这样画布就会被设置为真正的 innerWidth 和 innerHeight 值。但是，这些重新缩放的图像看起来很糟糕，尤其是在手机屏幕上。所以我想知道是否有办法用 KonvaImage 缩放图片，使它们看起来不错并具有正确的缩放比例。

这是 JSX 代码：

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

【问题讨论】：

标签： reactjs canvas blueimp konvajs

【解决方案1】：

Konva 没有从生成的画布元素中读取样式。只有它真正的width 和height。您只需要缩放图像以匹配您的 pixelRatio：

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

【讨论】：