Successfully implemented JCrop example code for selecting an area on an image with a preview and getting coordinates.
However, the challenge lies in allowing users to select an image from their file system, display it in the browser, and perform the aforementioned actions.
An attempt was made to replace the hardcoded image reference with a simple Javascript function. The standalone Javascript code functions well in enabling image selection and display in the browser.
Unfortunately, integrating this with the JQuery/JCrop code for image area selection and preview seems to be problematic.
The current code setup is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($){
// Variables for API, image size, and preview pane info
var jcrop_api,
boundx,
boundy,
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
console.log('init',[xsize,ysize]);
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
});
</script>
<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">
.jcrop-holder #preview-pane {
display: block;
position: absolute;
z-index: 2000;
top: 75px;
right: -270px;
padding: 6px;
border: 1px rgba(0,0,0,.4) solid;
background-color: white;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
#preview-pane .preview-container {
width: 170px;
height: 170px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<h1>Aspect Ratio with Preview Pane</h1>
</div>
<input type = "file" id = "src" />
<img id="target" alt="[Jcrop Example]" />
<div id="preview-pane">
<div class="preview-container">
<img id="target_preview" class="jcrop-preview" alt="Preview" />
</div>
</div>
<script>
function showImage(src,target,target_preview) {
var fr=new FileReader();
fr.onload = function(e) {
target.src = this.result;
target_preview.src = this.result
};
src.addEventListener("change",function() {
fr.readAsDataURL(src.files[0]);
});
}
var src = document.getElementById("src");
var target = document.getElementById("target");
var target_preview = document.getElementById("target_preview");
showImage(src,target,target_preview);
</script>
<form id="coords"
class="coords"
onsubmit="return false;"
action="http://example.com/post.php">
<div class="inline-labels">
<label style="display: none">X1 <input type="text" size="4" id="x1" name="x1"/></label>
<label style="display: none">Y1 <input type="text" size="4" id="y1" name="y1"/></label>
<label style="display: none">X2 <input type="text" size="4" id="x2" name="x2"/></label>
<label style="display: none">Y2 <input type="text" size="4" id="y2" name="y2"/></label>
<label style="display: none">W <input type="text" size="4" id="w" name="w"/></label>
<label style="display: none">H <input type="text" size="4" id="h" name="h"/></label>
</div>
</form>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>
For this task, relevant Javascript is enclosed within the tags.
Referencing a related SO post that may provide insight: Input file show live selected image in JCrop
Exploring the use of JCrop's "setImage" function can be beneficial for achieving the desired outcome. Any guidance or additional information would be greatly appreciated. Thank you.