Display part of scaled image in div

Question

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

This logic for calculating the best div area is done in PHP. and he spits JSON like this:

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

This is against an image of 1536px width and 1024px height. And the div it should be placed on is 500px width and 400px height . Now, regardless of whether the PHP script performs the correct calculations, I want to display this part of the image in the div of this dimension in order to visually see the result. And in this I have problems.

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 display the image area correctly in the div. I use clip based on articles I have seen on the Internet. I have no problem using any other technique (like background image) if this works fine. I'm more of a server-side programmer and not very good at front-end methods. So I would appreciate it if anyone could give me directions on how to make this work work!

Thank you in advance

Answer 1

Note. Pay attention to the expected result of the values ​​inside

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

in

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

?

Is used

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