正确裁剪图像问题

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;
}

我的问题是这样的。我正在实现一个功能，我可以浏览图像并能够裁剪它。它看起来像下图：

当我点击“设为身份证照片”时，它会调用执行裁剪功能的功能：

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 x 250像素），但由于下面的css，它在浏览和选择时会变形，使其成为（299 x 370像素）：

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

我该如何解决？获得正确的选定区域。无论如何“.browse -selection”是图1中带有虚线的div。它是由jquery插件生成的，这就是为什么它不包含在我的原始HTML代码中。

Answer 1

更改

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

对此：

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

Answer 2

此问题的原因是磁盘上的图像文件尺寸与浏览器中呈现的尺寸不同。

在这种情况下，我编辑了我的代码：

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]);
    }

}