Question

所以我有一个脚本，当我提供图像细节和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。如果工作正常，我没有使用任何其他技术（如背景图像）的问题。我更像是一个服务器端程序员，而且前端技术也不是很好。所以如果有人能指出如何让这件事发挥作用，我将不胜感激！

提前致谢

Answer 1

注意，请注意

中预期的值结果

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

在

"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()

尝试

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/" />

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

1 个答案: