reactjs - 如何设置自定义大小以在 react-konva 中导出图像？

Question

我已经使用 react-konva 创建了一个响应式舞台，但我找不到设置自定义尺寸以导出图像的方法。通常，右键单击并保存图像的工作方式与当时窗口中的大小相同。我想添加一个按钮来下载图像，但我无法设置这样做的方法，因为我是 React Hooks 的新手，我找不到设置数据 URL 的方法。请引用这个

    import React, { Component, useState, useRef, useCallback } from "react";
    import { render } from "react-dom";
    import { Stage, Layer, Text, Image, Rect, Transformer, Circle, Line } from "react-konva";
    import card01 from "../images/01.jpg"
    import useImage from "use-image";
    import "./styless.css";
    import Button from '@mui/material/Button';
    
    const WIDTH = 875;
    const HEIGHT = 500;
    const ZOOM = 1;
    
    class Canvas extends Component {
      state = {
        stageWidth: WIDTH,
        zoom: 1,
      };
    
      render() {
        
        const { containerWidth } = this.props;
        var scale = (containerWidth / WIDTH) * ZOOM;
        let width = WIDTH * scale;
        let height = HEIGHT * scale;
        console.log({ containerWidth, width, height, scale });
    
        const LionImage = () => {
            const [image] = useImage(card01);
            return <Image image={image} width={width} height={height} scale={scale}/>;
          };
    
        return (
          <div style={{ width: `100%`, border: "1px solid grey" }}>
          
            <Stage width={width} height={height} scale={scale}>
              <Layer>
              <LionImage />
              <Text
                x={containerWidth / 10}
                y={scale*35}
                text="Some text"
                fontSize={28}
                fontFamily="Poppins"
                fill="gray"
                scaleX={scale}
                scaleY={scale}
    
                width={width}
                height={height}
              />
              </Layer>
            </Stage>
          </div>
        );
      }
    }
    
    class App extends Component {
      state = {
        zoom: 1
      };
      componentDidMount() {
        this.checkSize();
        window.addEventListener("resize", this.checkSize);
      }
    
      componentWillUnmount() {
        window.removeEventListener("resize", this.checkSize);
      }
    
      checkSize = () => {
    
        const containerWidth = this.container.offsetWidth;
        const containerHeight = this.container.offsetHeight;
        this.setState({ ...this.state, containerWidth, containerHeight });
    
      };
    
      render() {
        const pWidht = this.state.containerWidth
          ? `${this.state.containerWidth * this.state.zoom}px`
          : "100%";
    
        return (
            <>
          
            <div
                style={{ width: "80%", height: "100%", left: "10%", position: "absolute" }}
                ref={(node) => {
                    this.container = node;
                } }
            >
                <div style={{ overflow: "auto;", width: `${pWidht}` }}>
                    <div>
                        <Button color="inherit" size="small" variant="outlined" sx={{boxShadow:3}} style={{marginTop:"20px",marginRight:"10px",marginBottom:"10px", fontSize:"12pt", color:"white"}}
                            type="button"
                            value="+"
                            onClick={() => this.setState({ ...this.state, zoom: this.state.zoom + 0.2 })}> + </Button>
                        <Button color="inherit" size="small" variant="outlined" sx={{boxShadow:3}} style={{marginTop:"20px",marginRight:"10px",marginBottom:"10px", fontSize:"12pt", color:"white"}}
                            type="button"
                            value="-"
                            onClick={() => this.setState({ ...this.state, zoom: this.state.zoom - 0.2 })} > - </Button>
                    </div>
                    <Canvas containerWidth={pWidht.replace("px", "")} />
                </div>
            </div>
      
            </>
        );
      }
    }
    
    const X = () => {
      return <App />;
    };
    
    render(<X />, document.getElementById("root"));
    export default App;

Answer 1

您需要使用 ref到 Stage并获取图像 URL 并下载它。

1. 在您的 Canvas 组件中创建一个 ref使用 createRef .

  constructor(props) {
    super(props);
    this.stageRef = createRef(null);
  }

1. 添加 stageRef给你的Stage .

<Stage  ... ref={this.stageRef}>
        ...
        ...
</Stage>

1. 添加以下两个实用函数，downloadURI将图像下载为文件和handleExport从 ref 获取数据 URI .

  downloadURI = (uri, name) => {
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  handleExport = () => {
    const uri = this.stageRef.current.toDataURL();
    this.downloadURI(uri, "stage.png");
  };

1. 添加一个新按钮，点击处理程序设置为 handleExport功能。

<button onClick={this.handleExport}>Download</button>

工作示例:

手动设置图片大小

使用下面的实用函数来改变图像width和 height使用从舞台接收的数据 URI ref .

resizeImage = (url, width, height, callback) => {
  var sourceImage = new Image();

  sourceImage.onload = function () {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height);
    callback(canvas.toDataURL());
  };

  sourceImage.src = url;
};

// fixed the image size to 200px by 200px before download
handleExport = () => {
  const uri = this.stageRef.current.toDataURL();
  this.resizeImage(uri, 200, 200, (sizeUpdatedDataURL) => {
    this.downloadURI(sizeUpdatedDataURL, "stage.png");
  });
};