问题
I am using JCrop to resize and crop images.
I wanted to add a feature so the user can:
-Select a image file
-Use jcrop to edit
-Upload without changing the page
I can do all these separately, but I get bugs when I mix these.
$('#target').attr('src', e.target.result);
$('#target2').attr('src', e.target.result);
The problem right now is, when I change the src location of id "target" main image, it doesn't show my new image. But when I do it on the id "target2" preview image it does show my new image and I can work on it.(But doesn't crop the new image when i press crop)
<script src="jquery.min.js"></script>
<script src="jquery.Jcrop.js"></script>
<script>
function dudecmon(){
jQuery(function($){
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$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,
onSelect: updateCoords,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$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'
});
}
};
});
};
</script>
<script>
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
</script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
//jcrop_api.setImage(e.target.result);
$('#target').attr('src', e.target.result);
$('#target2').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
dudecmon();
}
}
</script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
<style type="text/css">
/* Apply these styles only when #preview-pane has
been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
display: block;
position: absolute;
z-index: 2000;
top: 10px;
right: -280px;
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);
}
/* The Javascript code will set the aspect ratio of the crop
area based on the size of the thumbnail preview,
specified here */
#preview-pane .preview-container {
width: 250px;
height: 175px;
overflow: hidden;
}
</style>
<img src="sago.jpg" id="target" alt="Jcrop Example" />
<div id="preview-pane">
<div class="preview-container">
<img src="sago.jpg" id="target2" class="jcrop-preview" alt="Preview" />
</div>
</div>
<form action="image.php" enctype="multipart/form-data" method="post" onsubmit="return checkCoords();">
<input type="file" name="file" name="imageinput" size="30" onchange="readURL(this);" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />
</form>
回答1:
You can use:
jcrop_api.setImage('/crop/demo_files/'+$("#btn_change").val());
to change the pic the drawback is in this way, you can not preview a pic correctly.
<script type="text/javascript">
jQuery(function($){
var jcrop_api;
$('#btn_change').change(function(){
$("#fielname").val($("#btn_change").val());
jcrop_api.setImage('/crop/demo_files/'+$("#btn_change").val());
})
$('#croppic').click(function(){
if(checkCoords()){
var data = { x: $('#x').val(), y: $('#y').val(),w: $('#w').val(), h: $('#h').val(),fielname:$("#fielname").val() };
$.post("http://localhost/crop/index.php/welcome/croppic",data,
function(backdata){
if(backdata=="success"){
jcrop_api.release();
$('#cropmessage').html("<font color=red>thumb pic made please select another one</font>").delay(1000).fadeOut();;
}
else
{
$('#cropmessage').html("<font color=black>error in process </font>");
}
});
}
});
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy;
$('#target').Jcrop({
onSelect: updateCoords,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
});
</script>
来源：https://stackoverflow.com/questions/19119581/input-file-show-live-selected-image-in-jcrop