HTML5 Canvas 到数据 URL 教程

要获取用 Konva 创建的舞台的数据 URL，我们可以使用 toDataURL() 方法，该方法要求为 Stage 提供一个回调函数（对于其他节点不需要回调）。此外，我们还可以传入一个 MIME 类型，如 image/jpeg，以及一个介于 0 和 1 之间的质量值。我们还可以获取特定节点的数据 URL，包括图层、组和形状。

注意：toDataURL() 方法要求绘制到画布上的任何图像都托管在与执行代码相同域的 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);

// 创建可拖动的矩形
const rect = new Konva.Rect({
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});

layer.add(rect);

// 添加按钮
const button = document.createElement('button');
button.textContent = '保存为图像';
document.body.appendChild(button);

button.addEventListener('click', () => {
  // 获取默认设置的数据 URL
  const dataURL = stage.toDataURL();
  
  // 在新窗口中打开
  const win = window.open();
  win.document.write(`<img src="${dataURL}" alt="Stage"/>`);
  
  // 你还可以使用不同的设置进行保存
  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 = () => {
    // 获取默认设置的数据 URL
    const dataURL = stageRef.current.toDataURL();
    
    // 在新窗口中打开
    const win = window.open();
    win.document.write(`<img src="${dataURL}" alt="Stage"/>`);
    
    // 你还可以使用不同的设置进行保存
    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' }}>
        保存为图像
      </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">
      保存为图像
    </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 = () => {
  // 获取默认设置的数据 URL
  const dataURL = stageRef.value.getNode().toDataURL();
  
  // 在新窗口中打开
  const win = window.open();
  win.document.write(`<img src="${dataURL}" alt="Stage"/>`);
  
  // 你还可以使用不同的设置进行保存
  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