React Canvas图片标注教程

在React中，你可以使用HTML5的Canvas API来对图片进行标注。下面是一个简单的React组件示例，它加载一张图片并在其上绘制标注。

首先，你需要在你的React组件中引入react-dom和react的useRef和useEffect Hooks。

import React, { useRef, useEffect } from 'react';
import { Canvas } from 'react-konva';

然后，你可以创建一个函数组件并在其中使用useRef Hook 来创建一个对canvas DOM元素的引用。

function ImageAnnotator() {
  const canvasRef = useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    const image = new Image();
    image.onload = () => {
      canvas.width = image.width;
      canvas.height = image.height;
      context.drawImage(image, 0, 0, image.width, image.height);
    };
    image.src = 'path/to/your/image.jpg';
  }, []);

在上述代码中，我们首先创建一个新的Image对象并设置其源为你要加载的图片的路径。然后，我们定义了一个onload事件处理器，该处理器将在图片加载完成后被调用。在事件处理器中，我们将图片的宽度和高度设置为canvas的宽度和高度，然后将图片绘制到canvas上。

接下来，你可以在图片上绘制标注。例如，你可以在图片上绘制一个矩形来标记某个区域。你可以使用context.fillRect()方法来绘制矩形。

context.fillRect(x, y, width, height);

其中，x和y是矩形的左上角坐标，width和height是矩形的宽度和高度。你可以根据你的需要修改这些参数来调整矩形的大小和位置。

最后，你可以使用context.stroke()和context.fill()方法来设置标注的边框和填充颜色。例如：

context.strokeStyle = 'black'; // 设置边框颜色为黑色
context.fillStyle = 'red'; // 设置填充颜色为红色
context.lineWidth = 2; // 设置边框宽度为2像素

一旦你完成所有标注的绘制，你可以将canvas转换为图像并显示在网页上，或者将其保存为文件。你可以使用HTML5的Canvas API的toDataURL()方法将canvas转换为图像。例如：

const imageUrl = canvas.toDataURL('image/png');

这将返回一个包含图像数据的URL，你可以将其设置为img元素的src属性来显示图像，或者将其发送到服务器进行保存。如果你想将图像保存为文件，你可以使用HTML5的Blob对象和URL.createObjectURL()方法将图像数据转换为Blob对象，然后将其下载到本地。例如：