0

我创建了一个边界框，并且我有一个图像，我想在图像上添加该边界框。我已经尝试了很多，但没有任何效果。请指导我如何做到这一点。我已经在下面上传了我的代码

反应代码：

import React, { useRef, useEffect } from 'react';
 


import 'bootstrap/dist/css/bootstrap.min.css';



function App() {
  const canvas = useRef();
  let ctx = null;
 
  // initialize the canvas context
  useEffect(() => {
    // dynamically assign the width and height to canvas
    const canvasEle = canvas.current;
    canvasEle.width = canvasEle.clientWidth;
    canvasEle.height = canvasEle.clientHeight;
 
    // get context of the canvas
    ctx = canvasEle.getContext("2d");
  }, []);
 
  useEffect(() => {
    const r1Info = { x: 20, y: 30, w: 150, h: 100 };
    const r1Style = { borderColor: 'red', borderWidth: 10 };
    drawRect(r1Info, r1Style);
    const r4Info = { x: 100, y: 220, w: 100, h: 50 };
    drawFillRect(r4Info);
  }, []);
 
  // draw rectangle
  const drawRect = (info, style = {}) => {
    const { x, y, w, h } = info;
    const { borderColor = 'black', borderWidth = 1 } = style;
 
    ctx.beginPath();
    ctx.strokeStyle = borderColor;
    ctx.lineWidth = borderWidth;
    ctx.rect(x, y, w, h);
    ctx.stroke();
  }
 
  
  
 
  return (
    <div className="App">
      


<div id="box-search">
      <div class="thumbnail text-center">
          <img src="https://karthiknbucket1.s3.ap-southeast-1.amazonaws.com/cat.jpg" alt="" />
          <div class="caption">
          <canvas ref={canvas}></canvas>
          </div>
      </div>
  </div>



    </div>
    
  );
}
 
export default App;

目前图像和框分开显示我想在图像上添加边界框请指导我如何做任何帮助将不胜感激

4

0 回答 0