0

我需要通过参考对象计算图像中对象的大小。这个问题已经在下一页处理了计算图片中对象的大小， darzang给出了以下解决方案：

$( document ).ready(function() {


var x1,x2,x3,x4,x5,x6,x7,x8,x9,x10,x11,x12,y1,y2,y3,y4,y5,y6,y7,y8,y9,y10,y11,y12;
var a;
var ag_distance_x_pixels,ag_distance_y_pixels,ag_distance_X_pixels,ag_distance_Y_pixels;
var ag_distance_x_metres,ag_distance_y_metres,ag_distance_X_metres,ag_distance_Y_metres;
var coefficient,ag_rapport_x,ag_rapport_y;
var ag_delta_x,ag_delta_y,ag_delta_X,ag_delta_Y;
var ag_taille_pixel_x,ag_taille_pixel_y;
var xA,yA,xB,yB,xo1,yo1,xo2,yo2;
var xq1,yq1,xq2,yq2;
var R1,R2,ag_distance_O1A_pixels,ag_distance_O15_pixels,ag_distance_O16_pixels,ag_distance_O1Q1_pixels;
var ag_distance_O16_metres,ag_distance_O15_metres,ag_distance_56_metres;


var ag_distance_O2B_pixels,ag_distance_O28_pixels,ag_distance_O25_pixels,ag_distance_O2Q2_pixels,ag_distance_O28_metres,ag_distance_O25_metres,ag_distance_58_metres;



 var canvas = document.getElementById('imageCanvas');
      var context = canvas.getContext('2d');
      var img = new Image();

      img.onload = function() {
                canvas.width = img.width;
            canvas.height = img.height;
            context.drawImage(img, 0, 0, img.width,img.height,0,0,canvas.width,canvas.height);
      };
      img.src = 'https://app.viperpro.it/videoperizia_developer/___test/draw-a-line-in-canvas-using-mouse-and-touch-events/photo_measurement_test_side_with_lines.jpg';

$('#ag_distance_x_metres').val(0.9);
$('#ag_distance_y_metres').val(1.2);

window.clic = function(event){

    clear();
    var log = $('#log');
    
    if($(event.target).is('#point1')) {
        a=1;
        $("#point1").css("background-color", "#ADFF2F");
    } else if ($(event.target).is('#point2')) {
        a=2;
        $("#point2").css("background-color", "#ADFF2F");;      
    } else if ($(event.target).is('#point3')) {
        a=3;
        $("#point3").css("background-color", "#ADFF2F");;
    } else if ($(event.target).is('#point4')) {
        a=4;
        $("#point4").css("background-color", "#ADFF2F");;
    } else if ($(event.target).is('#point5')) {
        a=5;
        $("#point5").css("background-color", "#ADFF2F");;
    } else if ($(event.target).is('#point6')) {
        a=6;
        $("#point6").css("background-color", "#ADFF2F");;
    } else if ($(event.target).is('#point7')) {
        a=7;
        $("#point7").css("background-color", "#ADFF2F");;
    } else if ($(event.target).is('#point8')) {
        a=8;
        $("#point8").css("background-color", "#ADFF2F");;   
    }
};
        
window.point_it = function(event){

    x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
    y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
    $("#imageCanvas").css.left = (x-1) ;
    $("#imageCanvas").css.top = (y-15) ;
        
    if(a==1)
    {x1=x; y1=y; a=0; $('#ag_photo_x1').html(x); $('#ag_photo_y1').html(y)}         // Récupération des valeurs de x et y et affichage dans le tableau
    else if(a==2)
    {x2=x; y2=y; a=0; $('#ag_photo_x2').html(x); $('#ag_photo_y2').html(y)}
    else if(a==3)
    {x3=x; y3=y; a=0; $('#ag_photo_x3').html(x); $('#ag_photo_y3').html(y)}
    else if(a==4)
    {x4=x; y4=y; a=0; $('#ag_photo_x4').html(x); $('#ag_photo_y4').html(y)}
    else if(a==5)
    {x5=x; y5=y; a=0; $('#ag_photo_x5').html(x); $('#ag_photo_y5').html(y)}
    else if(a==6)
    {x6=x; y6=y; a=0; $('#ag_photo_x6').html(x); $('#ag_photo_y6').html(y)}
    else if(a==7)
    {x7=x; y7=y; a=0; $('#ag_photo_x7').html(x); $('#ag_photo_y7').html(y)}
    else if(a==8)
    {x8=x; y8=y; a=0; $('#ag_photo_x8').html(x); $('#ag_photo_y8').html(y)}
    else if(a==0)
    {alert("Veuillez recliquer sur le bouton du point souhaité");}
}   
    
window.clear = function(){                                              // Réinitialise les couleurs de fond des boutons
    $('.boutons').css("background-color","buttonface");             
}


window.distance56 = function(){
    var denominator, a, b, numerator1, numerator2;
    
    // Point de fuite A
    denominator = ((y4 - y3) * (x1 - x2)) - ((x4 - x3) * (y1 - y2));

    a = y2 - y3;
    b = x2 - x3;
    numerator1 = ((x4 - x3) * a) - ((y4 - y3) * b);
    numerator2 = ((x1 - x2) * a) - ((y1 - y2) * b);
    a = numerator1 / denominator;
    b = numerator2 / denominator;

    xA = x2 + (a * (x1 - x2));
    yA = y2 + (a * (y1 - y2));
    
        // 2) Point O1
    denominator = ((y6 - y5) * (x4 - x1)) - ((x6 - x5) * (y4 - y1));

    a = y1 - y5;
    b = x1 - x5;
    numerator1 = ((x6 - x5) * a) - ((y6 - y5) * b);
    numerator2 = ((x4 - x1) * a) - ((y4 - y1) * b);
    a = numerator1 / denominator;
    b = numerator2 / denominator;

    xo1 = x1 + (a * (x4 - x1));
    yo1 = y1 + (a * (y4 - y1));


    // 2bis) Trouver/Placer Q1
    
    denominator = ((y6 - y5) * (x3 - x2)) - ((x6 - x5) * (y3 - y2));

    a = y2 - y5;
    b = x2 - x5;
    numerator1 = ((x6 - x5) * a) - ((y6 - y5) * b);
    numerator2 = ((x3 - x2) * a) - ((y3 - y2) * b);
    a = numerator1 / denominator;
    b = numerator2 / denominator;

    xq1 = x2 + (a * (x3 - x2));
    yq1 = y2 + (a * (y3 - y2));


    // Calcul de O1A
    ag_delta_x=xo1-xA;                                                                                   
    ag_delta_y=yo1-yA;
    ag_distance_O1A_pixels=-(Math.sqrt(Math.pow(ag_delta_x, 2) + Math.pow(ag_delta_y, 2)));

    // Calcul de O15
    ag_delta_x=xo1-x5;                                                                                   
    ag_delta_y=yo1-y5;
    ag_distance_O15_pixels=Math.sqrt(Math.pow(ag_delta_x, 2) + Math.pow(ag_delta_y, 2)); 

    // Calcul de O16
    ag_delta_x=xo1-x6;                                                                                   
    ag_delta_y=yo1-y6;
    ag_distance_O16_pixels=Math.sqrt(Math.pow(ag_delta_x, 2) + Math.pow(ag_delta_y, 2));

    // Calcul de O1Q1
    ag_delta_x=xo1-xq1;                                                                                  
    ag_delta_y=yo1-yq1;
    ag_distance_O1Q1_pixels=Math.sqrt(Math.pow(ag_delta_x, 2) + Math.pow(ag_delta_y, 2));   



    // Calcul du rapport anharmonique R1
    R1 = ((ag_distance_O1A_pixels-ag_distance_O1Q1_pixels)/(ag_distance_O1A_pixels-ag_distance_O15_pixels))/((0-ag_distance_O1Q1_pixels)/(0-ag_distance_O15_pixels));



    // Calcul du rapport anharmonique R2
    R2 = ((ag_distance_O1A_pixels-ag_distance_O1Q1_pixels)/(ag_distance_O1A_pixels-ag_distance_O16_pixels))/((0-ag_distance_O1Q1_pixels)/(0-ag_distance_O16_pixels));

    
    // Calcul de la distance 5-6 en mètres
    ag_distance_56_metres=(R2-R1)*$('#ag_distance_x_metres').val();
    $('#ag_distance_X_metres').val(ag_distance_56_metres);  
}

window.distance58 = function(){
    
    var denominator, a, b, numerator1, numerator2;

    // Placer B
    denominator = ((y3 - y2) * (x4 - x1)) - ((x3 - x2) * (y4 - y1));

    a = y1 - y2;
    b = x1 - x2;
    numerator1 = ((x3 - x2) * a) - ((y3 - y2) * b);
    numerator2 = ((x4 - x1) * a) - ((y4 - y1) * b);
    a = numerator1 / denominator;
    b = numerator2 / denominator;

    xB = x1 + (a * (x4 - x1));
    yB = y1 + (a * (y4 - y1));


    // 2) Point O2
    denominator = ((y3 - y4) * (x8 - x5)) - ((x3 - x4) * (y8 - y5));

    a = y5 - y4;
    b = x5 - x4;
    numerator1 = ((x3 - x4) * a) - ((y3 - y4) * b);
    numerator2 = ((x8 - x5) * a) - ((y8 - y5) * b);
    a = numerator1 / denominator;
    b = numerator2 / denominator;

    xo2 = x5 + (a * (x8 - x5));
    yo2 = y5 + (a * (y8 - y5));


// 2bis) Trouver/Placer Q2

    denominator = ((y2 - y1) * (x8 - x5)) - ((x2 - x1) * (y8 - y5));

    a = y5 - y1;
    b = x5 - x1;
    numerator1 = ((x2 - x1) * a) - ((y2 - y1) * b);
    numerator2 = ((x8 - x5) * a) - ((y8 - y5) * b);
    a = numerator1 / denominator;
    b = numerator2 / denominator;

    xq2 = x5 + (a * (x8 - x5));
    yq2 = y5 + (a * (y8 - y5));


// Calcul de O2B
ag_delta_x=xo2-xB;                                                                                   
ag_delta_y=yo2-yB;
ag_distance_O2B_pixels=-(Math.sqrt(Math.pow(ag_delta_x, 2) + Math.pow(ag_delta_y, 2)));

// Calcul de O28
ag_delta_x=xo2-x8;                                                                                   
ag_delta_y=yo2-y8;
ag_distance_O28_pixels=Math.sqrt(Math.pow(ag_delta_x, 2) + Math.pow(ag_delta_y, 2)); 

// Calcul de O25
ag_delta_x=xo2-x5;                                                                                   
ag_delta_y=yo2-y5;
ag_distance_O25_pixels=Math.sqrt(Math.pow(ag_delta_x, 2) + Math.pow(ag_delta_y, 2));

// Calcul de O2Q2
ag_delta_x=xo2-xq2;                                                                                  
ag_delta_y=yo2-yq2;
ag_distance_O2Q2_pixels=Math.sqrt(Math.pow(ag_delta_x, 2) + Math.pow(ag_delta_y, 2));   



// Calcul du rapport anharmonique R1
R1 = ((ag_distance_O2B_pixels-ag_distance_O2Q2_pixels)/(ag_distance_O2B_pixels-ag_distance_O28_pixels))/((0-ag_distance_O2Q2_pixels)/(0-ag_distance_O28_pixels));



// Calcul du rapport anharmonique R2
R2 = ((ag_distance_O2B_pixels-ag_distance_O2Q2_pixels)/(ag_distance_O2B_pixels-ag_distance_O25_pixels))/((0-ag_distance_O2Q2_pixels)/(0-ag_distance_O25_pixels));


    ag_distance_58_metres=(R2-R1)*$('#ag_distance_y_metres').val();
    $('#ag_distance_Y_metres').val(ag_distance_58_metres);
}

});
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 300px;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

#ag_photo{
    width:675px;
    height:900px;
}

 #pointer_div{
    width:675px;
    height:900px;
}

 #pointform{
    width:675px;
    height:900px;
}
#ag_photo_div_image{
    width:675px;
    height:900px;
}
#ag_photo_exemple{
    width:300px;
    height=300px;
}
#ag_photo_photo{
    margin-left : 20px; 
    margin-top : 20px;
    float:left;
}
#ag_photo_tableaux{
    float:left;
    margin-left: 50px;
    margin-top : 20px;
    text-align:center;"
}
#imageCanvas{
    width:675px;
    height:900px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
       
<body>

    

    <div id="ag_photo_photo">
    
        <div id="pointer_div" onclick="point_it(event)"> 
            <canvas id="imageCanvas"></canvas>
        </div>
        
    </div>


    <div id="ag_photo_tableaux">
    
        <div id="ag_photo_calibrage_points">
            <table>
                <tr>
                    <th>Point</th>
                    <th>X</th>
                    <th>Y</th>
                </tr>
                <tr>
                    <td><button onclick="clic(event)" class="boutons" id="point1">1</button></td>
                    <td id="ag_photo_x1"></td>
                    <td id="ag_photo_y1"></td>
                </tr>
                <tr>
                    <td><button onclick="clic(event)" class="boutons" id="point2">2</button></td>
                    <td id="ag_photo_x2"></td>
                    <td id="ag_photo_y2"></td>
                </tr>
                <tr>
                    <td><button onclick="clic(event)" class="boutons" id="point3">3</button></td>
                    <td id="ag_photo_x3"></td>
                    <td id="ag_photo_y3"></td>
                </tr>
                <tr>
                    <td><button onclick="clic(event)" class="boutons" id="point4">4</button></td>
                    <td id="ag_photo_x4"></td>
                    <td id="ag_photo_y4"></td>
                </tr>
                <tr>
                    <th>Distance</th>
                    <th>Pixels</th>
                    <th>Mètres</th>
                </tr>
                <tr>
                    <td>1-2</td>
                    <td id="ag_distance_x_pixels"></td>
                    <td> <input type="text" id="ag_distance_x_metres" value="" size="5"></td>
                </tr>
                <tr>
                    <td>2-3</td>
                    <td id="ag_distance_y_pixels"></td>
                    <td><input type="text" id="ag_distance_y_metres" value="" size="5"></td>
                </tr>
            </table>
        </div>
        <br>
        
        <div id="ag_photo_mesure_points">
            <table>
                <tr>
                    <th>Point</th>
                    <th>X</th>
                    <th>Y</th>
                </tr>

                <tr>
                    <td><button onclick="clic(event)" class="boutons" id="point5">5</button></td>
                    <td id="ag_photo_x5"></td>
                    <td id="ag_photo_y5"></td>
                </tr>
                <tr>
                    <td><button onclick="clic(event)" class="boutons" id="point6">6</button></td>
                    <td id="ag_photo_x6"></td>
                    <td id="ag_photo_y6"></td>
                </tr>
                <tr>
                    <td><button onclick="clic(event)" class="boutons" id="point7">7</button></td>
                    <td id="ag_photo_x7"></td>
                    <td id="ag_photo_y7"></td>
                </tr>
                <tr>
                    <td><button onclick="clic(event)" class="boutons" id="point8">8</button></td>
                    <td id="ag_photo_x8"></td>
                    <td id="ag_photo_y8"></td>
                </tr>
                <tr>
                    <th>Distance</th>
                    <th>Pixels</th>
                    <th>Mètres</th>
                </tr>
                <tr>
                    <td>5-6</td>
                    <td id="ag_distance_X_pixels"></td>
                    <td> <input type="text" id="ag_distance_X_metres" value="" size="5"></td>
                </tr>
                <tr>
                    <td>6-7</td>
                    <td id="ag_distance_Y_pixels"></td>
                    <td><input type="text" id="ag_distance_Y_metres" value="" size="5"></td>
                </tr>
            </table>
        </div><br><br>
        
        <button onclick="distance58();distance56()" id="calculer">Calculer</button><br><br>
        
    </div>
</body>

一切正常。问题在于，仅当参考对象大于要测量的对象时才有效，反之则不行。

4

0 回答 0