Jquery 使用javascript在图像上画一条线

我有一个html图像img标签。我的要求是，当用户单击图像时，它将在拖动鼠标的同时标记一个点并绘制一条线。然后，当用户完成拖动并单击图像时，它应该显示线条，并以毫米/厘米为单位显示线条的尺寸。也就是说，用户必须在图像上画一条线，并显示他画的线的距离/长度（毫米/厘米）

---

如何在web应用程序中实现此功能？有人能帮我实现这一功能吗？

使用html5画布元素，将图像设置为画布元素的css背景（因为不必重新绘制图像，因此绘制线条更容易），然后在画布上绘制线条：

1） 在

mousedown

上，记录鼠标位置并注册一个围绕这些起始位置关闭的

mousemove

处理程序，然后注册一个

mouseup

处理程序以移除

mousemove

处理程序

2） 在

mousemove

处理程序中，找到当前鼠标位置和鼠标起始位置之间的偏移量，将此偏移量添加到起始线位置，然后使用此新位置重新绘制画布

不能使用物理距离标记线，因为这将取决于显示工作的屏幕。您最好确定图像的缩放/打印分辨率（以dpi为单位，例如每英寸300像素），并根据该分辨率计算线条长度。具体的实现取决于您希望如何使用结果

更新：示例

HTML

<canvas id="canvas" width="200" height="200">
    Your browser doesn't support canvas
</canvas>

JS

canvas{
    background-image: url("image.jpg");
    background-position: center;
    background-size: 100% 100%;
}

$(document).ready(function(){

    var imageDpi = 300;

    var can = document.getElementById('canvas');
    var ctx = can.getContext('2d');
    var startX, startY;

    $("canvas").mousedown(function(event){
        startX = event.pageX;
        startY= event.pageY;

        $(this).bind('mousemove', function(e){
            drawLine(startX, startY, e.pageX, e.pageY);
        });
    }).mouseup(function(){
        $(this).unbind('mousemove');
    });

    function drawLine(x, y, stopX, stopY){
        ctx.clearRect (0, 0, can.width, can.height);
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(stopX, stopY);
        ctx.closePath();
        ctx.stroke();

        // calculate length   
        var pixelLength = Math.sqrt(Math.pow((stopX - x),2) + Math.pow((stopY-y),2));
        var physicalLength = pixelLength / imageDpi;
        console.log("line length = " + physicalLength + 
                    " inches (image at " + imageDpi + " dpi)");
    }
});

更新2：行长度

---

我更新了我的示例。它定义了图像的物理分辨率，并根据该假设计算了线条的长度。

a摆弄一下您到目前为止的数据？您能帮我计算一下在图像上绘制的线条的物理长度吗？我建议使用（offsetX，offsetY）而不是（pageX，pageY），以防canvas元素不位于页面的（0,0）位置。