如何在Jcrop中设置自定义高度和宽度后获取图像的原始高度和宽度
问题描述:
我试图使用Jcrop插件裁剪图像。上传的图像比我想要的尺寸(600X600)大。如何在Jcrop中设置自定义高度和宽度后获取图像的原始高度和宽度
我正在做的是最初将图像尺寸设置为600X600以显示给用户,然后将其尺寸设置为原始高度和宽度。然后将原始高度和宽度设置为Jcrop的“trueSize”选项以获得正确的裁剪。
问题是我没有得到第一次上传的图像正确的原始高度和宽度。但是当我在不清除缓存的情况下再次上传它时,它工作正常。我想第一次获得图像的原始尺寸。这里是我的代码:
HTML:
<input type="file" id="FileUpload1" accept=".jpg,.png,.gif" />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td>
<img id="Image1" src="" alt="" style="display: none;" />
</td>
<td>
<canvas id="canvas" height="5" width="5"></canvas>
</td>
</tr>
</table>
<br />
<input type="button" id="btnCrop" value="Crop" style="display: none" />
<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgCropped" id="imgCropped" />
的Jquery:
$(document).delegate('#cover-image','change', function(e){
$('.update-img').hide();
$('#Image1').hide();
$('#loader1').show();
var reader = new FileReader();
reader.onload = function (e) {
$('#Image1').attr("src", e.target.result);
var $img = $("#Image1");
$img.hide().removeClass("image12");
var width = $img.width();
var height = $img.height();
$img.addClass("image12").show();
$('#Image1').Jcrop({
setSelect: [ 0,0,600,180 ],
aspectRatio: 10/3,
trueSize: [width, height],
onChange: SetCoordinates,
onSelect: SetCoordinates
});
}
reader.readAsDataURL($(this)[0].files[0]);
});
$('#btnCrop').click(function() {
var x1 = $('#imgX1').val();
var y1 = $('#imgY1').val();
var width = $('#imgWidth').val();
var height = $('#imgHeight').val();
var canvas = $("#canvas")[0];
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
canvas.height = 180;
canvas.width = 600;
context.drawImage(img, x1, y1, width, height, 0, 0, canvas.width, canvas.height);
$('#imgCropped').val(canvas.toDataURL());
$('#btnCrop').hide();
$('#save-cropped-image, #delete-image, .preview').show();
};
img.src = $('#Image1').attr("src");
});
function SetCoordinates(c) {
$('#imgX1').val(c.x);
$('#imgY1').val(c.y);
$('#imgWidth').val(c.w);
$('#imgHeight').val(c.h);
$('#btnCrop').show();
$('#save-cropped-image, #delete-image').hide();
};
CSS:
.image12{
height:600px;
width:600px;
}
如果有人知道答案请回复快。谢谢!
答
使用这个代码中的jquery.js文件
$(document).delegate('#cover-image','change', function(e){
$('.update-img').hide();
$('#Image1').hide();
$('#loader1').show();
var reader = new FileReader();
reader.onload = function (e) {
var image = new Image();
//Set the Base64 string return from FileReader as source.
image.src = e.target.result;
$('#Image1').attr("src",image.src);
image.onload = function() {
var height = this.height;
var width = this.width;
// alert(height+"and"+width);
var jcrop_api = $('#Image1').Jcrop({
trueSize: [width, height],
onChange: SetCoordinates,
onSelect: SetCoordinates
})
}
}
reader.readAsDataURL($(this)[0].files[0]);
// jcrop_api.destroy();
});
+1
感谢Harleen!这很容易。 :-) –
使用'高度()'和'宽度()在''window.load功能()'事件 –
我用高度()和宽度()图像加载功能。但它返回给我一个未定义的值或有时0值。 –