好的,所以下面的 JCrop 代码不起作用。
访问者使用文件输入元素在他们的计算机上选择图像,然后在上传之前显示在 img 标签中。然后访问者使用 JCrop 来选择他们想要上传的图像的哪一部分。上传后,我将使用 servlet 裁剪图像并将其保存在数据库中。
有什么想法吗?谢谢
标头中的 JavaScript:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="tapmodo-Jcrop-5e58bc9/js/jquery.Jcrop.js"></script>
<link href="tapmodo-Jcrop-5e58bc9/css/jquery.Jcrop.css" rel="stylesheet" type="text/css"/>
<script>
<!--
$(document).ready(function () {
$("#previewInput").change(function(e) {
var file = e.originalEvent.srcElement.files[0];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
img.id = 'previewimg';
reader.readAsDataURL(file);
$("#preview").html('Please crop your image below:<br />');
$("#preview").append(img);
setTimeout(1250);
$('#previewimg').Jcrop({
aspectRatio: 1,
onChange: setCoords,
onSelect: setCoords
});
});
});
function setCoords(c)
{
$('input[name=x1]').val(c.x);
$('input[name=y1]').val(c.y);
$('input[name=x2]').val(c.x2);
$('input[name=y2]').val(c.y2);
};
-->
</script>
正文中的 HTML:
<h1>Thanks for registering!</h1>
Upload a display picture:<br />
<div id="upload">
<form action="crop" method="post" enctype="multipart/form-data" >
<input id="previewInput" type="file" name="image"/><br />
<input type="hidden" name="x1" value=""/>
<input type="hidden" name="y1" value=""/>
<input type="hidden" name="x2" value=""/>
<input type="hidden" name="y2" value=""/>
<input type="submit" name="submit" value="Upload and crop image"/><br />
</form>
<div id="preview"></div>
</div>
<a href="">Or click here to view your account and keep the default image</a><br />