我需要通过参考对象计算图像中对象的大小。这个问题已经在下一页处理了计算图片中对象的大小， 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>一切正常。问题在于，仅当参考对象大于要测量的对象时才有效，反之则不行。