使用图像区域图获取不正确的坐标

Question

我正在使用图片maphighlight.js，但

当我crop the image时，cropped image与我选择的部分不完全相同，

它会转移some left to the cropped image

<?php
global $wpdb;

$date1 = date('d-M-Y');
$querys = "select * from `news_setpg` where `date` = '$date1'";
$select_datas = $wpdb->get_results($querys);
$no_of_pg = $select_datas[0]->noofpages;

if(isset($_POST['gotopage']))
{
    $pageno = $_POST['pageno'];
}
else
{
    $pageno = '1';
}
$date = date('d-M-Y');
$query = "select * from `newspaper` where `date` = '$date' AND `pgno` = '$pageno'";
$select_data5 = $wpdb->get_results($query);
$img = $select_data5[0]->image;
$idd = $select_data5[0]->id;
$img_src = plugins_url()."/eNewsPaper/menu-pages/newspaper/".$img;
$path = plugins_url()."/eNewsPaper/";
?>
<script type="text/javascript">
    window.onload = function(){
        jQuery('img#photo').imgAreaSelect({
            handles: true,
        });
    };
    function get_coord(){
        var ias = jQuery('#photo').imgAreaSelect({ instance: true });
        var imgno = jQuery('#imgno').val();
        var res = ias.getSelection();
        var pgno = '<?php echo $pageno; ?>';
        var patth = '<?php echo $img; ?>';
        var id = '<?php echo $idd; ?>';
        jQuery.ajax({
            type: "POST",
            url: "<?php echo $path.'create_image.php'; ?>",
            data: { fid:imgno,id:id,pgno:pgno, width : res.width, height : res.height, x1 : res.x1, y1 : res.y1, x2 : res.x2, y2 : res.y2, imgno: imgno, pathss : patth },
            success: function(data){
                               jQuery(".container").append(data);
                               console.log();
            }
        });
        ias.cancelSelection();

        var newimgno = parseInt(imgno) + parseInt(1);
        jQuery('#imgno').val(newimgno);
    }
    </script>
<div class='alert alert-info'>
<form name="gotopage" action="#" method="post">
Go To Page
<select name='pageno'>
<?php
for($i=1;$i<=$no_of_pg;$i++)
{
    if($i==$pageno)
        echo "<option selected='selected' value='$i'>Page $i</option>";
    else
        echo "<option value='$i'>Page $i</option>";
}
?>
</select>
<input class='btn btn-danger' type="submit" name="gotopage" value="Go To Page"></form></div>
<input type="text" id="imgno" value="1" /><br />
<input type="button" onclick="get_coord()" value="create this spot" /><br />
<div style="width: 700px; overflow: scroll; float: left;">
<img src="<?php echo $img_src; ?>" id="photo" style="margin-left:0px" />
</div>
<div class="container" style="width: 250px; height: 700px; overflow: scroll"></div>