React Konva, blueimp-load-image 上传图像缩放

Question

我正在尝试在 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 值：

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

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

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

这是 JSX 代码：

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

Answer 1

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

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

React Konva, blueimp-load-image 上传图像缩放

React Konva, blueimp-load-image uploaded Image rescaling

canvas

blueimp

reactjs

konvajs