在 div 中显示缩放图像的部分

所以我有一个脚本，当我提供图像细节和 div 大小时，它会计算图像中的区域和比例因子，以便显示 div 内图像的最佳区域。

计算 div 最佳区域的逻辑是在 PHP 中完成的。它会输出一个 JSON，如下所示：

{"scale":1.34,"x1":502,"x2":822,"y1":178,"y2":578}

这是与以下图像相对应的1536px width and 1024px height.要放置此内容的 div 是500px width and 400px height。现在，无论 PHP 脚本是否进行了正确的计算，我都想将图像的这部分显示在这个尺寸的 div 中，以便我可以直观地看到结果。这就是我遇到麻烦的地方。

我尝试了以下方法：

function showImageInDiv(image,data)
{
    imageSrc = image.attr("src");
    data = JSON.parse(data);
    $('#iDiv').empty().append("<img src='"+imageSrc+"' id='iDivImage'>");
    $("#iDivImage").css({
        "position": "absolute",
        "top":0, //<--what should this be?
        "left":0,// <--?
        "height":data.scale+"%", //scale is 1.34 - how do i translate here?
        "width":data.scale+"%", //<--?
        "clip": "rect("+data.y1+"px,"+data.x2+"px,"+data.y2+"px,"+data.x1+"px)"
    }); 
}

无论如何，上面的代码都无法在 div 中正确渲染图像区域。我在用clip根据我在网上看到的文章。如果工作正常的话，我使用任何其他技术（例如背景图像）都没有问题。我更多的是一个服务器端程序员，不太擅长前端技术。因此，如果有人能给我指导如何让这个东西发挥作用，我将不胜感激！

提前致谢

注意，请注意以下值的预期结果

{"scale":1.34,"x1":502,"x2":822,"y1":178,"y2":578}

at

"rect("+data.y1+"px,"+data.x2+"px,"+data.y2+"px,"+data.x1+"px)"

?

已利用

{"scale":1.34,"x1":100,"x2":200,"y1":100,"y2":200};

以下。看CanvasRenderingContext2D.drawImage() https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

Try

var data = {"scale":1.34,"x1":100,"x2":200,"y1":100,"y2":200};
function showImageInDiv(image, data) {   
    $("#iDiv").empty()
    .append("<canvas id=iDivImage width=500px height=400px></canvas>");
    var img = new Image;
    img.onload = function() {
    var canvas = $("#iDivImage");
    var ctx = canvas.get(0).getContext("2d");
    ctx.drawImage(this, data.x1, data.y1, 500, 400, 0, 0, data.x2, data.y2);
    canvas.css("transform", "scale(" + data.scale + ", "+ data.scale +")");
    };
    img.src = image[0].src;    
};

showImageInDiv($("img"), data);

var data = {"scale":1.34,"x1":100,"x2":200,"y1":100,"y2":200};
function showImageInDiv(image, data) {   
    $("#iDiv").empty().append("<canvas id=iDivImage width=500px height=400px></canvas>");
    var img = new Image;
    img.onload = function() {
    var canvas = $("#iDivImage");
    var ctx = canvas.get(0).getContext("2d");
    ctx.drawImage(this, data.x1, data.y1, 500, 400, 0, 0, data.x2, data.y2);
    canvas.css("transform", "scale(" + data.scale + ", "+ data.scale +")");
    };
    img.src = image[0].src;

    //"rect("+data.y1+"px,"+data.x2+"px,"+data.y2+"px,"+data.x1+"px)"

};

showImageInDiv($("img"), data);

#iDiv {
  display:block;
  width:500px;
  height:400px;
}

#iDiv {
  clip-path():
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="iDiv"></div>
<img src="http://lorempixel.com/1536/1024/cats/" />