Canvas 截图——使用 JavaScript 将 HTML5 Canvas 导出为图像

要使用 Konva 截取 Canvas 并将其导出为图像，请使用 toDataURL() 方法。此方法用于 Stage 时需要回调函数，其他节点不需要回调函数。 你可以传入 image/jpeg 等 MIME 类型和 0 到 1 之间的质量值。 还可以截取特定节点，包括图层、组和图形。

注意：toDataURL() 方法要求 Canvas 上绘制的所有图像 与执行代码托管在同一域名下的 Web 服务器上。 如果不满足此条件，将引发 SECURITY_ERR 异常。

**操作说明：**拖放矩形，然后单击保存按钮以获取合成数据 URL，并在新窗口中打开生成的图像。

Vanilla

import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 400
});

const layer = new Konva.Layer();
stage.add(layer);

// create draggable rectangle
const rect = new Konva.Rect({
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});

layer.add(rect);

// add button
const button = document.createElement('button');
button.textContent = 'Save as Image';
document.body.appendChild(button);

button.addEventListener('click', () => {
  // get data URL with default settings
  const dataURL = stage.toDataURL();
  
  // open in new window
  const win = window.open();
  win.document.write(`<img src="${dataURL}" alt="Stage"/>`);
  
  // you can also save with different settings
  const jpegURL = stage.toDataURL({
    mimeType: 'image/jpeg',
    quality: 0.8
  });
  console.log('JPEG URL:', jpegURL);
});

Open Sandbox

React

import { Stage, Layer, Rect } from 'react-konva';
import { useRef, useState } from 'react';

const App = () => {
  const stageRef = useRef(null);
  const [position, setPosition] = useState({ x: 100, y: 100 });

  const handleExport = () => {
    // get data URL with default settings
    const dataURL = stageRef.current.toDataURL();
    
    // open in new window
    const win = window.open();
    win.document.write(`<img src="${dataURL}" alt="Stage"/>`);
    
    // you can also save with different settings
    const jpegURL = stageRef.current.toDataURL({
      mimeType: 'image/jpeg',
      quality: 0.8
    });
    console.log('JPEG URL:', jpegURL);
  };

  const handleDragEnd = (e) => {
    setPosition({
      x: e.target.x(),
      y: e.target.y()
    });
  };

  return (
    <div>
      <button onClick={handleExport} style={{ marginBottom: '10px' }}>
        Save as Image
      </button>
      <Stage width={400} height={400} ref={stageRef}>
        <Layer>
          <Rect
            x={position.x}
            y={position.y}
            width={100}
            height={100}
            fill="red"
            stroke="black"
            strokeWidth={4}
            draggable
            onDragEnd={handleDragEnd}
          />
        </Layer>
      </Stage>
    </div>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <div>
    <button @click="handleExport" style="margin-bottom: 10px">
      Save as Image
    </button>
    <v-stage ref="stageRef" :config="stageSize">
      <v-layer>
        <v-rect
          :config="rectConfig"
          @dragend="handleDragEnd"
        />
      </v-layer>
    </v-stage>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const stageSize = {
  width: 400,
  height: 400
};

const position = ref({ x: 100, y: 100 });

const rectConfig = ref({
  x: position.value.x,
  y: position.value.y,
  width: 100,
  height: 100,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});

const stageRef = ref(null);

const handleExport = () => {
  // get data URL with default settings
  const dataURL = stageRef.value.getNode().toDataURL();
  
  // open in new window
  const win = window.open();
  win.document.write(`<img src="${dataURL}" alt="Stage"/>`);
  
  // you can also save with different settings
  const jpegURL = stageRef.value.getNode().toDataURL({
    mimeType: 'image/jpeg',
    quality: 0.8
  });
  console.log('JPEG URL:', jpegURL);
};

const handleDragEnd = (e) => {
  const newPos = e.target.position();
  position.value = newPos;
  rectConfig.value.x = newPos.x;
  rectConfig.value.y = newPos.y;
};
</script>

Open Sandbox