HTML5 Canvas 导出高质量图像教程

如果你需要将一个舞台导出为图像或 base64，你可以使用 stage.toDataURL() 或 stage.toImage() 方法。

在 Konva 中，导出的图像默认的 pixelRatio 属性设置为 1。这意味着如果你导出一个大小为 500x500 的舞台，那么导出的图像将具有相同的大小 500x500。

在某些情况下，你可能想要导出更适合更高（甚至更小）分辨率的图像。例如，你可能希望将某个内容导出为图像，然后在 HDPI 设备（具有高像素比，例如视网膜显示屏）上的画布中使用该图像。另一种情况可能是你需要将用户的绘图导出到运行高分辨率的计算机上。

如果你使用默认设置进行此操作，那么你会看到模糊的图像。你可以在这里阅读有关全局 pixelRatio 属性的更多信息 MDN - devicePixelRatio。

对于这两种用例，你可以使用：

stage.toDataURL({
  pixelRatio: 2 // 或其他你需要的值
})

现在，大小为 500x500 的舞台将导出为大小为 1000x1000 的图像。Konva 中几乎所有的节点都存储为矢量数据，位图图像和缓存节点除外。这导致导出的图像质量高。

说明: 尝试将舞台保存为图像。你会看到它具有高分辨率。

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 circle = new Konva.Circle({
  x: 200,
  y: 200,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
});

const text = new Konva.Text({
  x: 150,
  y: 190,
  text: '高质量导出',
  fontSize: 20,
  fill: 'white'
});

layer.add(circle);
layer.add(text);

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

button.addEventListener('click', () => {
  // 将舞台保存为高质量图像
  const dataURL = stage.toDataURL({
    pixelRatio: 2 // 双倍分辨率
  });
  
  // 创建下载链接
  const link = document.createElement('a');
  link.download = 'stage.png';
  link.href = dataURL;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

Open Sandbox

React

import { Stage, Layer, Circle, Text } from 'react-konva';
import { useRef } from 'react';

const App = () => {
  const stageRef = useRef(null);

  const handleExport = () => {
    const dataURL = stageRef.current.toDataURL({
      pixelRatio: 2 // 双倍分辨率
    });
    
    const link = document.createElement('a');
    link.download = 'stage.png';
    link.href = dataURL;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div>
      <button onClick={handleExport} style={{ marginBottom: '10px' }}>
        保存为高质量图像
      </button>
      <Stage width={400} height={400} ref={stageRef}>
        <Layer>
          <Circle
            x={200}
            y={200}
            radius={70}
            fill="red"
            stroke="black"
            strokeWidth={4}
          />
          <Text
            x={150}
            y={190}
            text="高质量导出"
            fontSize={20}
            fill="white"
          />
        </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-circle :config="circleConfig" />
        <v-text :config="textConfig" />
      </v-layer>
    </v-stage>
  </div>
</template>

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

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

const circleConfig = {
  x: 200,
  y: 200,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
};

const textConfig = {
  x: 150,
  y: 190,
  text: '高质量导出',
  fontSize: 20,
  fill: 'white'
};

const stageRef = ref(null);

const handleExport = () => {
  const dataURL = stageRef.value.getNode().toDataURL({
    pixelRatio: 2 // 双倍分辨率
  });
  
  const link = document.createElement('a');
  link.download = 'stage.png';
  link.href = dataURL;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};
</script>

Open Sandbox