我需要执行客户端裁剪。
为此,我正在使用jcrop。
现在,由于我的裁剪表面需要适合模态,所以我做了以下工作:(请阅读下面的内容或直接阅读代码)
当输入发生变化时,我销毁了所有jcrop元素,并从图像中删除了所有max-“ width:100%”以外的所有css标签,以便图像不会溢出。
然后,来自输入的文件将分配到图像标签中。之后,显示模态,以便我可以获取适当大小的图像元素的宽度和高度。
然后,将这些尺寸分配给jcrop的boxWidth和boxHeight参数,并将其附加到图像,以使jcrop元素也不会溢出。我必须将代码放置在fileReader.onload函数中,以便仅在更改图像源之后才确定尺寸。
$(document).on('change', '#upload', function (evt) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
$('.jcrop-holder').remove();
$('#studentPhoto').css("width", "");
$('#studentPhoto').css("height", "");
$('#studentPhoto').css("visibility", "");
$('#studentPhoto').css("display", "");
// FileReader support
if (FileReader && files && files.length) {
var fr = new FileReader();
var w;
var h;
fr.onload = function () {
$('#studentPhoto').attr('src', fr.result)
$('#imgMOD').show('fast', '', function () {
w = $('#studentPhoto').width();
h = $('#studentPhoto').height();
$('#studentPhoto').Jcrop({
onSelect: showCoords,
aspectRatio: 667 / 500,
boxWidth: w,
boxHeight: h
});
});
}
fr.readAsDataURL(files[0]);
}
function showCoords(c) {
$('#x').text(c.x);
$('#y').text(c.y);
$('#x2').text(c.x2);
$('#y2').text(c.y2);
$('#w').text(c.w);
$('#h').text(c.h);
};
});
问题是,即使调试器显示已到达.jcrop部分,它在第二次发送信号后也不会创建jcrop元素。第一次运行完美。
好的,所以Jcrop我不知道这有什么不同,但是删除Jcrop的这种方式解决了问题。
if ($('#studentPhoto').data('Jcrop')) {
$('#studentPhoto').data('Jcrop').destroy();}