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

【问题标题】：display portion of scaled image in div在 div 中显示缩放图像的一部分
【发布时间】：2015-05-09 12:04:40
【问题描述】：

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

提前致谢

【问题讨论】：

...您是从服务器中提取调整大小和裁剪的图像还是以任何方式获得整个 1536x1024px 图像？还有你所说的“div内图像的最佳区域”是什么意思？
@RokoC.Buljan 我正在获取整个图像。最佳区域，是一种内部算法，它决定图像的哪个区域应显示在 div 中。像素对应于该区域。
你是说覆盖整个 DIV 而不出现白色区域（由于 vert|or|horiz 图像大小）？
@RokoC.Buljan 内部算法应该确保选择提供的像素，以便当图像以这些像素为原点显示在 div 中时没有白色区域，并且结尾。我的问题是关于“如何”在 div 中显示原始的、未裁剪的图像，关于“如何”放置图像以使 JSON 中提到的 x1、y1 成为 div 的 0,0

标签： javascript jquery html css

【解决方案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/" />

【讨论】：