display portion of scaled image in div

Question

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

Answer 1

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