React Konva 导出图片：图像和文本导出方法详解

使用 React Konva 可以将文本和 Konva 图形对象导出为图像。

要导出图像，只需调用 Konva 的 toImage() 方法即可。toImage() 方法接受一个回调函数作为参数，该回调函数将接收一个参数，该参数是一个 Data URL，它代表导出的图像。

例如：

import React from 'react';
import { render } from 'react-dom';
import { Stage, Layer, Text } from 'react-konva';

class App extends React.Component {
  handleClick() {
    // get the canvas object and its context
    const canvas = this.refs.canvas;
    const context = canvas.getContext('2d');

    // create an image and draw it on the canvas
    const image = new window.Image();
    image.src = 'myImage.jpg';
    context.drawImage(image, 0, 0);

    // get the image data from the canvas
    const imageData = canvas.toDataURL();

    // send the image data to the server
    fetch('/api/uploadImage', {
      method: 'POST',
      body: imageData
    });
  }

  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Text
            text='Try click on rect'
            fontSize={20}
            onClick={this.handleClick.bind(this)}
          />
        </Layer>
      </Stage>
    );
  }
}

render(<App />, document.getElementById('root'));

此外，如果要导出 Konva 图形对象，可以使用 Konva 的 toDataURL() 方法：

let dataURL = layer.toDataURL();

或者，如果要导出文本，可以使用 Konva 的 toDataURL() 方法：

let dataURL = text.toDataURL();