缩放图像的显示部分 [英] display portion of scaled image in div

问题描述

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

计算div的最佳区域的逻辑是在PHP中完成的。并且它像这样的JSON：

  {scale：1.34，x1：502，x2：822 ，y1：178，y2：578} 
  

code> 1536px width和1024px height。并且要放置的div是 500px宽和400px高。现在不管PHP脚本是否正确的计算，我想在这个维度的div中显示图像的这个部分，以便我可以直观地看到结果。这就是我遇到麻烦。

我尝试了以下操作：

  function showImageInDiv ）
 {
 imageSrc = image.attr（src）; 
 data = JSON.parse（data）; 
 $（'＃iDiv'）。empty（）。append（< img src ='+ imageSrc +'id ='iDivImage'>）; 
 $（＃iDivImage）。css（{
position：absolute，
top：0，//<  - 这应该是什么？ $ bleft：0，// < - ？
height：data.scale +％，// scale is 1.34  - 我如何翻译？
width data.scale +％，// < - ？
clip：rect（+ data.y1 +px，+ data.x2 +px，+ data.y2 +px + data.x1 +px）
}）; 
} 
  

上述代码在任何情况下都不会正确地在div 。我使用 clip 基于我在线看到的文章。我没有使用任何其他技术（如背景图像），如果这个工作正常的问题。我更多是一个服务器端程序员，并不是很好的前端技术。

提前感谢

解决方案

请注意，请注意

内的值的预期结果。
$ b

  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）。 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： 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>

So I have a script, to which when I provide a image detail and a div size, it calculates a region in the image, and a scale factor in order to show the best area of the image inside the div.

This logic of calculating the best region of the div is done in PHP. and it spits a JSON like so:

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

This is against an image that is 1536px width and 1024px height. And the div on which this is to be placed is 500px width and 400px height. Now irrespective of whether the PHP script is doing the right calculations, I want to display this portion of the image in a div of this dimension so that I can see the result visually. And that is where I am having trouble.

I tried the following:

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

The above code in any case does not render the image region correctly in the div. I am using clip based on articles I saw online. I do not have a problem using any other technique (like background-image), if that works fine. I am more of a server side programmer and not very good with front end techniques. So I would appreciate if anyone can give me pointers on how to get this thing working!

Thanks in advance

解决方案

Note, Note certain about expected result of values within

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

?

Utilized

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

below. See 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/" />

这篇关于缩放图像的显示部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！