Image 当Jcrop处理多个图像时，大小不正确

一,，

二,，

问题：我们什么时候动态更改图像？ 答：当用户异步上传图像时，例如使用ajaxfileupload.js。 当用户上传一张图片，并想上传另一张图片时。 如果他使用Jcrop，后面的图像都以第一个图像的大小显示

尽管他使用以下jQuery代码来更改新图像的大小，但它的大小仍然不正确。 美元（“#目标”）.attr（“宽度”，“400”）； $（“目标”）.attr（“高度”、“250”）

有人知道如何使用Jcrop并以真实大小显示每个图像吗？我的意思是当图像动态变化时

非常感谢

源代码被压缩成一个zip文件，它们都是字体结束代码，所以你可以在解压后打开它，请打开“crop.html”

您可以在此处下载zip文件（214KB）：

“crop.html”的内容是：

jQuery（函数（$）{
var jcrop_api；
initJcrop（）；
$（'#coords'）。关于（'change'，'input'，function（e）{
var x1=$（'#x1'）.val（），
x2=$（'#x2'）.val（），
y1=$（'#y1'）.val（），
y2=$（'#y2'）.val（）；
jcrop_api.setSelect（[x1，y1，x2，y2]）；
});
函数initJcrop（）{
$（'#target'）.Jcrop({
onChange:showCoords，
onSelect:showCoords，
onRelease:clearCoords
}，函数（）{
jcrop_api=这个；
});
};
$（“#更改为WiderPicture”）。单击（函数（e）{
jcrop_api.destroy（）；
美元（“#target”）.attr（“src”、“img/2.jpg”）；
美元（“#目标”）.attr（“宽度”，“400”）；
$（“目标”）.attr（“高度”、“250”）；
$（“#normalPicture”）.attr（“src”、“img/2.jpg”）；
$（“#诺曼PicureIntroduction”）.html（“原始图片：400X250”）；
$（'#changeToWiderPicture'）.hide（）；
$（“#转换回”）.show（）；
initJcrop（）；
返回false；
});
$（“#转换回”）。单击（函数（e）{
jcrop_api.destroy（）；
美元（“#target”）.attr（“src”、“img/1.jpg”）；
$（“#normalPicture”）.attr（“src”、“img/1.jpg”）；
$（“#诺曼PicureIntroduction”）.html（“原始图片：250X400”）；
$（“#转换回”）.hide（）；
$（'#changeToWiderPicture'）.show（）；
initJcrop（）；
返回false；
});
});
函数showCoords（c）{
$（'#x1'）.val（c.x）；
$（'y1'）.val（c.y）；
$（'x2'）.val（c.x2）；
$（'y2'）.val（c.y2）；
$（'w'）.val（c.w）；
$（'h'）.val（c.h）；
};
函数clearCoords（）{
$（'coords input'）.val（''）；
};

附有Jcrop的图片


原图：250X400
X1
Y1
X2
Y2
W
H
更改为横向图片
转变

我从另一个问题的另一个答案中找到了解决方案： 使用-

或者简单地覆盖相应的CSS样式，例如-

 $("#target").css({"width":"400px" ,"height":"250px"});

$("#target").attr("width","400");
$("#target").attr("height","250");

请注意： CSS样式具有比属性更高的优先级，因此，例如，有时您会发现您的更改不适用-

 $("#target").css({"width":"400px" ,"height":"250px"});

$("#target").attr("width","400");
$("#target").attr("height","250");

因此，为了更安全，请使用CSS样式而不是属性