我目前正在使用 Jcrop,但我们遇到了 Chrome 和 Safari 的问题。
我们可以上传图像,Jcrop 绑定到图像,因此我可以拖动尺寸并使用检查元素可以确认尺寸已正确更新到字段中。但是,当我单击裁剪图像按钮时,事件不会在 chrome 或 safari 上触发。我一直在寻找问题,但无法找到它。由于我为照片上传了 ajax 并将照片加载到彩盒中,因此我不得不使用以下代码:
种植区
$(document).on("submit", "#resize", function (e) {
e.preventDefault();
$(".loadgif").css("display", "none");
var t = $("#resizeimage").val();
var n = $("#w").val();
var r = $("#h").val();
var i = $("#x").val();
var s = $("#y").val();
$.ajax({
type: "POST",
url: "scripts/resizer.php",
data: {
image: t,
w: n,
h: r,
x: i,
y: s
}
}).done(function (e) {
$("#images1").val(e)
}).complete(function (e) {
var t = $(".myform");
t.reset();
});
$("#cropimage").colorbox.close()
});
上传部分:
$(document).ready(function () {
$("#formsubmit").click(function (e) {
$(".loadgif").css("display", "block");
e.preventDefault();
var t = $('<iframe name="postiframe" id="postiframe" style="display:none;"/>');
$("body").append(t);
var n = $(".myform");
n.attr("action", "scripts/uploader.php");
n.attr("method", "post");
n.attr("enctype", "multipart/form-data");
n.attr("encoding", "multipart/form-data");
n.attr("target", "postiframe");
n.attr("file", $("#userfile").val());
n.submit();
$("#postiframe").load(function () {
function e(e) {
$("#x").val(e.x);
$("#y").val(e.y);
$("#w").val(e.w);
$("#h").val(e.h)
}
function t() {
if (parseInt($("#w").val())) return true;
alert("Please select a crop region then press submit.");
return false
}
iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
$("#cropimage").html(iframeContents);
$("#postiframe").remove();
$.colorbox({
width: "60%",
inline: true,
href: "#cropimage"
});
$(document).find("#postiframe").remove();
$(function () {
$("#cropbox").Jcrop({
aspectRatio: 1,
onSelect: e
})
});
})
});
});
由于该网站确实使用了用于产品提交的表单,但是我还必须使用为 jcrop 提交的表单,因此它将修改表单以进行上传,然后在重置表单后,我什至不能走到那一步。正如我所说,这在 IE 和 Firefox 中运行良好。
任何帮助,将不胜感激。