JCrop调整图像不裁剪 - Javascript

我想使用JCrop来裁剪图像。但结果令人沮丧，我不知道为什么。我有一个图片上传器，当有人在图片中选择javascript时，会更改页面上已有图片的来源，以匹配新上传的图片。然后，我有这样的代码：JCrop调整图像不裁剪 - Javascript

$('#myForm').ajaxForm({ 
    dataType: 'json', 
    success: function (result) { 
     $("#image-editor-preview img") 
      .attr("src", "/Profiles/AvatarWorker/" + _id + "?random=" + Math.random()) 
         .Jcrop({ 
          aspectRatio: 1, 
          setSelect: [100, 100, 50, 50], 
          minSize: [160, 160], 
          maxSize: [160, 160], 
          onChange: setCoords, 
          onSelect: setCoords 
         }); 
    } 
}); 

var x = 0, y = 0, w = 0, h = 0; 
function setCoords(c) { 
    x = c.x; 
    y = c.y; 
    w = c.w; 
    h = c.h; 
};

然而，这是发生了什么：

enter image description here

我试图尝试过相当多的解决这一问题，但最终的结果都是一样的。有人有主意吗？谢谢。

来源

2012-05-10 yaegerbomb

你可以发布你的函数'setCoords'的源吗？ –

@EthanBrown done – yaegerbomb

我能弄明白。原来，JCrop里面的twitter引导模式有JCrop框的宽度问题。 twitter bootstrap模式覆盖JCrop CSS中的CSS。不得不修改JCrop中的CSS来避免发生这种情况。

来源

2012-07-27 17:03:17 yaegerbomb

你修改了哪些Css？ – Bungdaddy

@Bungdaddy Oof，这是很久以前的事了。另一个人在这里评论这个问题：http://stackoverflow.com/a/11207459/692197。他所做的与我所做的事情有关。裁剪工具从模式继承css。我相信必须删除高度和宽度来解决jcrop css文件中的问题。 – yaegerbomb

根据Jcrop文档，它实际上并没有裁剪。它只会创建一个图像裁剪UI。然后它取决于服务器进行实际裁剪;见http://deepliquid.com/content/Jcrop_Implementation_Theory.html。所以它看起来像插件正在做它正在做的事情。正如他们所表明的那样，现在剩下的就是让你在服务器上做自己。

来源

2012-05-10 23:08:50 BrianFreud

保存图像不是问题。裁剪工具是问题。我可以用坐标保存图像。事实上，它不与给定的图像工作是我不了解的。我不知道为什么它将给定的图像变形，而不是显示图像的裁剪区域。 – yaegerbomb

我不确定你打算做什么，然后你的代码;快速浏览一下，看起来，当选择或更改事件发生时，您立即用setCoords重置它。 Esp onChange - “当选择正在移动时调用”;你永远不会让用户真正地设置坐标，如果我遵循正确的话，因为你立即重置回到x = 0，y = 0，w = 0，h = 0.再次，只是一个猜测，但我认为它是然后看到一个无效的选择，并使用您的默认选择 - setSelect：[100,100,50,50]。示例中showCoords（）的回调似乎是一个访问函数，而不是setter。 – BrianFreud

由于您在100x50的图像上设置了160x160的图像大小，因此它看起来像是将100x50图像延伸到160x80的160x160框中。 – BrianFreud

我有同样的问题，但我发现，为什么会这样。

在我的CSS文件，我有这样的代码：

img { 
    width: 100%; 
    height: auto; 
    border: none; 
}

当我删除宽度和高度根据这个定义，插件开始正常工作。

来源

2012-06-26 12:34:49 user1171557

JCrop调整图像不裁剪 - Javascript

回答

相关问题