如何在缩放图像时准确地获得矩形区域的左上坐标

Question

.rectangle 
		{
			border: 1px solid black;
			position: absolute;			
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="slider1" class="imgart" style=" height: 480px;width: 1127px;overflow:auto;">
							<img border="0" src="http://images.all-free-download.com/images/graphiclarge/natural_beauty_highdefinition_picture_166133.jpg" width="auto" height="auto" alt="jQuery Image slider" >																	
						</div>

$(document).on("click", ".data-table tr", function(){
   $(this).find("td").each(function(){
       var st = $(this).text;
       $(this).html ("<input type='text' value='" + str + "'>");
    })
})

“我完成了在图像上绘制矩形区域并使用javascript获取矩形区域左右坐标。但是，当图像是左侧的缩放坐标时，矩形区域的顶部会发生变化。”