Question

我想在图像上找到一条线的长度和圆的半径取决于图像宽度

见下图

var canvas = document.getElementById('loadCanvas'),lastPos, isDown = false;
    ctx = canvas.getContext("2d");          
    ctx.drawImage(this, 0, 0, canvas.width, canvas.height);          
    ctx.lineCap = "round";                                   
    ctx.lineWidth = $('#canvasSelWidth').val();
    ctx.globalCompositeOperation = "multiply";  
    ctx.strokeStyle = $('#canvasSelColor').val();
    canvas.onmousedown = function(e) {
        isDown = true;
        SPos = getPos(e);
        lastPos = getPos(e);
    };
    window.onmousemove = function(e) {
        if (!isDown) return;
        var pos = getPos(e);
        ctx.beginPath();
        ctx.moveTo(lastPos.x, lastPos.y);
        ctx.lineTo(pos.x, pos.y);
        ctx.stroke();
        lastPos = pos;
    };
    window.onmouseup = function(e) {
        isDown = false
        lPos = getPos(e);
        measurementOnImageCanvas();
    };
    function getPos(e) {
        var rect = canvas.getBoundingClientRect();
        xPosition = e.clientX - rect.left;
        yPosition = e.clientY - rect.top;
        return {x: e.clientX - rect.left, y: e.clientY - rect.top}
    }

我用于第一个坐标lPos和最后一个SPos。

var xCorData = lPos.x - SPos.x
    var yCorData = lPos.y - SPos.y
    var finalPixel =  Math.sqrt( xCorData*xCorData + yCorData*yCorData );
    var centimeters = finalPixel * 2.54 / 96;
    var mm = centimeters*10;
    var inch = mm*0.0393701;

请帮我解决这个问题

Answer 1

无法完成

我假设您希望获得客户端计算机上像素的物理大小。遗憾的是，没有办法获得显示尺寸。

window.screen.width和window.screen.height将为您提供显示器的分辨率，但无法知道显示器的大小。即使有可能获得设备品牌和型号，您仍然不知道它是使用自己的显示器还是插入另一个。更糟糕的是，多显示器设置可能有两个或更多不同的屏幕尺寸，因此您的画布具有像素物理尺寸不同的区域。

您所能做的就是让客户进入屏幕分辨率。

假设你有屏幕对角线。

目前，我正在购买一台配备1680 x 945像素显示屏的17.3笔记本电脑。获取像素大小。

假设像素是方形的。

const mmPerInch = 25.4;  // constant
var screenDiagonal = 17.3 * mmPerInch; // ??? how to get this (17.3) is the problem
var resX = window.screen.width;        // nor do you know if the pixel is square
var resY = window.screen.height;
// now get the number of pixels diagonally
if(typeof Math.hypot === "function"){  // use the new hypot function if available
    var pixelsDiagonal = Math.hypot(resX,resY);
}else{
    var pixelsDiagonal = Math.sqrt(resX*resX+resY*resY);
}
// then divide the screen size by the pixels to get the pixel size.
var pixelSize_mm = screenDiagonal / pixelsDiagonal;
// result pixel is 0.23 by 0.23 mm

您现在拥有以mm为单位的像素大小，可以使用它来准确测量您渲染的对象。但不能保证浏览器可以放大或缩小。

要将像素转换为mm，只需将像素尺寸乘以像素大小

function pixel2mm(pixels){
    return pixels * pixelSize_mm;
}

同时询问对角线并不能保证输入或输入正确的值。此外，并非所有像素都是正方形，而且更难找到。

Answer 2

如果你想要测量图像上的东西而不是屏幕上的东西，你就拥有了所有必要的代码，只需要你需要与之相关联。

您必须假设您使用的是96 DPI设备或将DPI作为参数。同样为画布提供固定比例是另一种方法（就像你在地图上一样）。

var canvas = document.getElementById('loadCanvas'),lastPos, isDown = false;
    ctx = canvas.getContext("2d");               
    ctx.lineCap = "round";                                   
    ctx.lineWidth = 2;  
    ctx.strokeStyle = 'blue';
    canvas.onmousedown = function(e) {
        isDown = true;
        SPos = getPos(e);
        lastPos = SPos;
    };
    window.onmousemove = function(e) {
        if (!isDown) return;
        var pos = getPos(e);
        ctx.clearRect(0,0,500,500)
        ctx.beginPath();
        ctx.moveTo(lastPos.x, lastPos.y);
        ctx.lineTo(pos.x, pos.y);
        ctx.stroke();
        lPos = pos;
    };
    window.onmouseup = function(e) {
        isDown = false
        lPos = getPos(e);
        measurementOnImageCanvas();
    };
    function getPos(e) {
        var rect = canvas.getBoundingClientRect();
        xPosition = e.clientX - rect.left;
        yPosition = e.clientY - rect.top;
        return {x: e.clientX - rect.left, y: e.clientY - rect.top}
    }
    function  measurementOnImageCanvas() {
    var xCorData = lPos.x - SPos.x
    var yCorData = lPos.y - SPos.y
    var finalPixel =  Math.sqrt( xCorData*xCorData + yCorData*yCorData );
    var inches = finalPixel  / 96;
    var centimeters = inches * 2.54;
    var millimiters = centimeters * 10;
    alert('line lenght:\n' + inches.toFixed(2) + ' inches\n' + centimeters.toFixed(4) + ' centimeters\n' + millimiters.toFixed(2) + ' millimeters\nAssuming you are on a 96 DPI device');
    }

<canvas id="loadCanvas" width=500 height=500 />

使用画布查找图像上两个选定坐标之间的距离

2 个答案: