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

Posted 2023-03-14

【中文标题】React Konva，blueimp-load-image 上传图像重新缩放

【英文标题】：React Konva, blueimp-load-image uploaded Image rescaling

【发布时间】：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>

【参考方案1】：

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

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