Javascript 图像问题的正确裁剪

这是我的页面布局和设计

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>

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

当我单击“设置为ID照片”时，它会调用执行裁剪功能的函数：

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像素）：

我该怎么修？仅获取正确的选定区域。无论如何“.browse-selection”是一个div，在图1中有一条虚线。它是由jquery插件生成的，这就是为什么它没有包含在我的原始HTML代码中。

更改

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

为此：

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

---

此问题是由于磁盘上的图像文件尺寸与浏览器中呈现的图像文件尺寸不同所致

在本例中，我编辑了我的代码：

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

---

}

这很有效，但我的空间有限。图像具有最大高度和宽度。当它超过最大值时，它必须适合它的父div。事实并非如此，Andrew，是的，我可以限制图像的最大高度，但裁剪后的图像无法正确显示选定区域。

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

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