如何在不使用 canvas 的情况下在特定（边界框）位置的图像顶部添加按钮？
How can I add a button on top of an image at a specific (bounding-box) position without using canvas?
我正在尝试在图像顶部添加按钮。在我的后端，我将获得一个边界框 (x, y, image_width, image_height)，我想用它来将按钮放置在边界框位置。
我的第一个尝试是使用 canvas -> 绘制一个矩形，然后添加一个事件侦听器来获取按钮。但是这个方法在我看来不是很干净。
有没有其他方法可以不使用 canvas.
....
ctx.fillStyle = "red";
ctx.drawImage(img,0,0);
ctx.fillRect(x, y, width, height);
canvas.addEventListener('click', function(evt) {
....
这是一个 fiddle 应该显示我当前的结果
jsfiddle
编辑：只是一个小的编辑，按钮位置不是恒定的，这取决于我将要得到的边界框。它也不是静态图像而是直播，尽管图像大小 (640x480) 是恒定的。
解决方案jsfiddle
为什么你的后端需要设置按钮位置？这似乎 un-ideal，但也许有充分的理由。后端会提供相对于整个文档或单个元素的坐标吗？按钮是否需要随时间移动？
我的直觉是添加一个 div，将您的图像设置为 div 的背景，然后将按钮放在 div 中的正确位置。你是在使用 vanilla JS 还是像 React 这样的框架？这将影响您放置按钮的方式。
我正在尝试在图像顶部添加按钮。在我的后端，我将获得一个边界框 (x, y, image_width, image_height)，我想用它来将按钮放置在边界框位置。
我的第一个尝试是使用 canvas -> 绘制一个矩形，然后添加一个事件侦听器来获取按钮。但是这个方法在我看来不是很干净。
有没有其他方法可以不使用 canvas.
....
ctx.fillStyle = "red";
ctx.drawImage(img,0,0);
ctx.fillRect(x, y, width, height);
canvas.addEventListener('click', function(evt) {
....
这是一个 fiddle 应该显示我当前的结果 jsfiddle
编辑：只是一个小的编辑，按钮位置不是恒定的，这取决于我将要得到的边界框。它也不是静态图像而是直播，尽管图像大小 (640x480) 是恒定的。
解决方案jsfiddle
为什么你的后端需要设置按钮位置？这似乎 un-ideal，但也许有充分的理由。后端会提供相对于整个文档或单个元素的坐标吗？按钮是否需要随时间移动？
我的直觉是添加一个 div，将您的图像设置为 div 的背景，然后将按钮放在 div 中的正确位置。你是在使用 vanilla JS 还是像 React 这样的框架？这将影响您放置按钮的方式。