如何使用JS在图像上绘制可写矩形

Question

Liveworksheets是一个面向学生和教师的网站，教师可以上传带有问题的文件，然后在上传文件后，教师回答这些问题，然后将该文件发送给学生-当然没有答案-来回答它。老师可以用很多方法来解决这些问题，但对我来说最重要的方法是老师可以在图像上画矩形，然后在上面写下答案。

我的问题是:我如何使用javascript在图像上绘制可写的矩形?

请参见演示。

Answer 1

Konva js是个不错的选择。

https://konvajs.org/

此工具允许您创建形状，并将所有内容保存到数据库中，以便您可以重新加载所有绘图以供将来使用。

不错的尝试

Answer 2

最后，经过长时间的搜索，我找到了Fabric.js，这里是我的代码示例

let fabricCanvas = new fabric.Canvas('your-canvas-id');
// You can change the canvas size via the next two lines
fabricCanvas.setHeight(document.getElementById('your-image').height);
fabricCanvas.setWidth(document.getElementById('your-image').width);
fabric.Image.fromURL(document.getElementById('your-image').src, function (img) {
let textBox = new fabric.Textbox("Enter Your Answer", {
fontSize: 16,
fontFamily: 'Arial',
textAlign: 'left',
width: 180,
top: 0,
left: 0,
});
fabricCanvas.add(img.set({ left: 0, top: 0 }));
fabricCanvas.add(textBox);
});