Правильная обрезка изображения Проблема

Question

Это макет и дизайн моей страницы.

HTML код:

<div id="myid_browse_modal_image" > 
    <image id="img_browse" src=""></image> 
</div> 
<div id="div_myphoto"> 
    <img id="img_myphoto" src="" alt="ID Photo"/> 
</div> 

CSS код:

#myid_browse_modal_image 
{ 
    height: 370px; 
    line-height: 370px; 
    text-align:center; 
    border: 1px; 
    border-style: solid; 
    border-color: gray; 
} 

#myid_browse_modal_image > img 
{ 
    max-width: 100%; 
    height: 100%; 
} 

#div_myphoto > img 
{ 
width: 150px; 
height: 150px; 
max-width:150px; 
max-height: 150px; 
border: 2px; 
border-style: solid; 
border-color: black; 
} 

Моя проблема выглядит следующим образом. Я реализую функциональность, где я могу просматривать изображение и иметь возможность обрезать его. Это выглядит, как на картинке ниже:

Когда я нажимаю «Установить как ID Photo», она вызывает функцию, которые выполняют функции кадрирования:

function myid_browse_crop() 
{     
var img_browse = document.getElementById('img_browse'); 
var $img_browse = $(img_browse); 

var img_myphoto= document.getElementById('img_myphoto'); 
var $img_myphoto = $(img_myphoto); 

//Create a temporary canvas 
var canvas= document.createElement("canvas"); 
canvas.id = "temp_canvas"; 
canvas.width = img_browse.width; 
canvas.height = img_browse.height; 

// get the canvas context; 
var ctx = canvas.getContext('2d'); 
ctx.drawImage(img_browse, 0, 0); 

//Get the position of my resizable div relative to the image  
var relativeX = $(".browse-selection").offset().left - $("#img_browse").offset().left; 
var relativeY = $(".browse-selection").offset().top - $("#img_browse").offset().top; 
var relativeW = $(".browse-selection").width(); 
var relativeH = $(".browse-selection").height(); 

var imageData = ctx.getImageData(relativeX,relativeY, relativeW, relativeH); 

// create destination canvas 
var canvas1 = document.createElement("canvas"); 
canvas1.width = relativeW; 
canvas1.height = relativeH;   
var ctx1 = canvas1.getContext("2d"); 
ctx1.rect(0, 0, relativeW, relativeH);       
ctx1.putImageData(imageData, 0, 0);      

img_myphoto.src = canvas1.toDataURL(); 
} 

Результат обрезанное изображение находится ниже , что неверно.

Это может быть из-за размеров изображения. Изображение меньше, на самом деле (202 х 250 пикселей), но искажается когда просматривание и выбран из-за CSS ниже, что делает его (299 х 370 пикселей):

#myid_browse_modal_image > img 
{ 
max-width: 100%; 
height: 100%; 
} 

Как я это исправить? Чтобы получить только правильный выбранный регион. Anyways «.browse -selection» - это div с пунктирными линиями в изображении 1. Он генерируется подключаемым модулем jquery, поэтому он не включен в мой оригинальный HTML-код.

Answer 1

Этот вопрос вызывает, имея размеры файлов изображений на диске, отличном от того, визуализируется в браузере.

В этом случае я отредактировал мой код:

function myid_browse_crop() 
{     
    var img_browse = document.getElementById('img_browse'); 
    var $img_browse = $(img_browse); 

    var img_myphoto= document.getElementById('img_myphoto'); 
    var $img_myphoto = $(img_myphoto); 


    //Create a temporary canvas 
    var canvas= document.createElement("canvas"); 
    canvas.id = "temp_canvas"; 
    canvas.width = img_browse_width ; 
    canvas.height = img_browse_height; 

    // get the canvas context; 
    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(img_browse, 0, 0); 

    //Get the position of my resizable div relative to the image  
    var relativeX = $(".browse-selection").offset().left - $("#img_browse").offset().left; 
    var relativeY = $(".browse-selection").offset().top - $("#img_browse").offset().top; 
    var relativeW = $(".browse-selection").width(); 
    var relativeH = $(".browse-selection").height(); 

    var xrelativeX = relativeX * (img_browse_width /img_browse.width); 
    var xrelativeY = relativeY * (img_browse_height/img_browse.height); 
    var xrelativeW = (img_browse_width /img_browse.width)*relativeW; 
    var xrelativeH = (img_browse_height/img_browse.height)*relativeH; 

    var imageData = ctx.getImageData(xrelativeX,xrelativeY, xrelativeW,xrelativeH); 

    // create destination canvas 
    var canvas1 = document.createElement("canvas"); 
    canvas1.width = xrelativeW ; 
    canvas1.height = xrelativeH;   
    var ctx1 = canvas1.getContext("2d"); 
    ctx1.rect(0, 0, xrelativeW, xrelativeH);       
    ctx1.putImageData(imageData, 0, 0);      

    img_myphoto.src = canvas1.toDataURL();  
} 

img_browse_height и img_browse_width является фактическим размером файла изображения на диске. Я приобрел эти переменные от чтения файла изображения через входной файл:

function readURL(input, imageframe) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     var image = new Image(); 

     reader.onload = function (e) { 
      image.src = e.target.result; 
      image.onload = function() { 
       //Actual File Size in Disk of "#img_browse" 
       img_browse_width = this.width; 
       img_browse_height = this.height;    
      }         
      $('#img_browse') 
       .attr('src', e.target.result);     

     }; 
     reader.readAsDataURL(input.files[0]); 
    } 

}

Answer 2

Изменить

#myid_browse_modal_image > img 
    { 
     max-width: 100%; 
     height: 100%; 
    } 

Для этого:

#myid_browse_modal_image > img 
    { 
     max-width: 100%; 
     height: auto; 
     max-height: 370px !important; 
    }