- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试以与 Ryan Bates 在 RailsCasts 第 182 集(修订版)中使用它的方式完全相同的方式将 Carrierwave 与 Jcrop 一起使用,但我无法让 Jcrop 工作,我不知道为什么。
当我到达 crop.html.erb
,它按预期显示原始图片和预览,但我无法在原始图片上选择任何内容并且预览没有响应。
我玩了一点,当我添加 ()
后面 .Jcrop
我至少可以在原始图片上选择一些东西,但预览仍然没有响应,所选区域也没有保持纵横比为 1。所以我猜出于某种原因 .Jcrop
之后的代码不被执行。我不是 CoffeeScript 专家,所以我需要一些帮助来解决这个问题。
这是我的代码。非常感谢!user.js.coffee
:
jQuery ->
new AvatarCropper()
class AvatarCropper
constructor: ->
$('#cropbox').Jcrop() ->
aspectRatio: 1
setSelect: [0, 0, 500, 500]
onSelect: @update
onChange: @update
update: (coords) =>
$('#user_crop_x').val(coords.x)
$('#user_crop_y').val(coords.y)
$('#user_crop_w').val(coords.w)
$('#user_crop_h').val(coords.h)
@updatePreview(coords)
updatePreview: (coords) =>
$('#preview').css
width: Math.round(100/coords.w * $('#cropbox').width()) + 'px'
height: Math.round(100/coords.h * $('#cropbox').height()) + 'px'
marginLeft: '-' + Math.round(100/coords.w * coords.x) + 'px'
marginTop: '-' + Math.round(100/coords.h * coords.y) + 'px'
users_controller.rb
:
def update
@user = User.find(params[:id])
if @user.update_attributes(params[:user])
if params[:user][:avatar].present?
render :crop
else
redirect_to @user, notice: "Successfully updated user."
end
else
render :new
end
end
def crop
@user = User.find(params[:id])
render view: "crop"
end
users/crop.html.erb
:
<h1>Crop Avatar</h1>
<%= image_tag @user.avatar_url(:pre_crop), id: "cropbox" %>
<h4>Preview</h4>
<div style="width:100px; height:100px; overflow:hidden;">
<%= image_tag @user.avatar.url(:pre_crop), :id => "preview" %>
</div>
<%= form_for @user do |f| %>
<div class="actions">
<% %w[x y w h].each do |attribute| %>
<%= f.hidden_field "crop_#{attribute}"%>
<% end %>
<%= f.submit "Crop" %>
</div>
<% end %>
最佳答案
这不是你想要的:
$('#cropbox').Jcrop ->
aspectRatio: 1
setSelect: [0, 0, 500, 500]
onSelect: @update
onChange: @update
->
)作为参数调用 Jcrop 插件,而 Jcrop 不知道如何处理函数。添加括号:
$('#cropbox').Jcrop() ->
aspectRatio: 1
setSelect: [0, 0, 500, 500]
onSelect: @update
onChange: @update
.Jcrop()
),然后尝试将其返回值调用为另一个将函数作为参数的函数:
$('#cropbox').Jcrop()(-> ...)
->
(并且不包括括号)以便您使用选项对象调用 Jcrop 插件:
$('#cropbox').Jcrop
aspectRatio: 1
setSelect: [0, 0, 500, 500]
onSelect: @update
onChange: @update
$('#cropbox').Jcrop(
aspectRatio: 1
setSelect: [0, 0, 500, 500]
onSelect: @update
onChange: @update
)
update
和
updatePreview
方法,因为它们缩进得太远了:
class AvatarCropper
constructor: ->
$('#cropbox').Jcrop
...
update: (coords) =>
...
updatePreview: (coords) =>
{update: ..., updatePreview: ...}
然后它被扔掉;如果缩进更深(比如 4 个空格)或不同的编辑器,这个问题会更明显,但我不会详细说明这一点,只要说你必须在 CoffeeScript 中非常仔细地观察你的空格就足够了;也许更好的编译器警告将有助于解决这个太常见的错误。修复你的缩进,你一切都很好:
关于ruby-on-rails - RailsCast 182(修订版): Jcrop not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10438012/
我想裁剪这个维度的图像 (900 * 300) .. 我使用 JCrop 这是我的代码: JS: $(window).load(function() { var jcrop
Jcrop 在没有 fancybox 的情况下也能正常工作。但是如果我在 Fancybox 中加载 Jcrop,我将无法裁剪图像。 图像在浏览器中显示两次。我猜应该是css问题或者什么的。 有什么解决
当移动或调整图像大小时,Jcrop 图像支架显示图像错误。我认为这与图像的真实大小有关。 它也发生在小图像上,我认为这与加载未知大小的图像有关。 HTML:
我想使用 jcrop 选择一个我无法修改的内置 JavaScript 的区域。我认为这个 javascript 干扰了 jcrop 。所以我尝试将一个透明的 gif 放在我想要选择的东西的顶部。这阻止
我目前正在设置图像上传裁剪序列。 应用程序需要强制执行的最小尺寸,但这会导致 JCrop 行为尴尬: 单击而不拖动不会产生任何结果。 单击并轻轻拖动即可立即选择最小高度。 一个潜在的解决方案可以解
如何取消 jcrop 图像? 我正在添加 jcrop ; $('#imgThumbnailer').Jcrop({ onChange: statusCrop, onSelect: st
我正在尝试弄清楚如何修复 JCrop 下的选择框大小。该文档提到了如何设置初始选择区域,但没有提到如何使其固定大小。有谁知道我该如何修复它。提前致谢。 http://deepliquid.com/co
我一直在尝试使用 jCrop 和 PHP 创建简单的头像更改/裁剪/上传功能。在 Chrome 和 Opera 上一切正常,但在 Safari、Firefox 和 Internet Explorer(
我正在使用 jquery jcrop,最近我在裁剪窗口上看到了一个奇怪的图案。我不确定它到底是什么。 为什么裁剪窗口上有斑马图案。代表什么意思? 最佳答案 我是 Jcrop 的作者。似乎有什么东西使底
我正在尝试使用图像列表来实现 Jcrop。目前,当您单击裁剪链接时,灯箱会加载包含图像和所有裁剪工具的 ajax 调用,一切都运行良好。我已经在数据库中测试了多个图像,所有图像看起来都不错。 但是,一
我正在使用最新版本的 jquery.jcrop。在图像上调用 jcrop() 时,裁剪可以工作,但不会调用回调。这使得无法设置jcrop_api以供以后使用。具体来说,我希望能够更改图像并需要 des
我将 jcrop 与 jquery 一起使用,但也想使用 jQueryRotate(2.2)。裁剪工作正常,但旋转不起作用。我有两个按钮 1)crop 和另一个用于旋转。旋转将顺时针和逆时针旋转图像
是否有任何选项可以使用 jCrop 限制图像的可裁剪区域。 我想在图像周围留出 10 像素的区域用于边框目的,因此当用户选择裁剪区域时,他不应该能够在允许的可裁剪区域旁边移动。 例如,此处的图像为 4
我有一个网站,可以选择上传图像然后裁剪。我使用过 jCrop 库。它在桌面浏览器上工作正常,但在移动设备上,选择图像后不会在弹出窗口中显示要裁剪的图像。 // show_popup_crop : sh
我有一个正在裁剪的预览,以及一个显示正在裁剪的部分的缩略图。每当我选择新图像时,预览都不会更新,而是保留之前使用的图像。但是,缩略图确实会更新,因为它显示了新图像。这是我的代码... function
我有一个包装 div box ,它是模式窗口。模态窗口内有一个图像。当 Jcrop() 添加到该图像时,我得到了意想不到的结果。如下图: 请注意,图像出现在模式窗口内部和外部。这是使用的 jQuery
我读过关于的文章 '$(...)Jcrop is not a function'. 我已确保没有两次包含 Jcrop 链接。 JCrop 似乎给我带来了麻烦 有人可以帮忙吗? HTML
我在 ASP.NET C# 应用程序中使用 JCrop 来裁剪图像。默认情况下,我希望将裁剪选择区域设置在图像的中心,这是我当前的代码,但问题是,它总是从 0,0 开始选择。
我正在使用带有预览 Pane 的 Jcrop,如教程 http://net.tutsplus.com/articles/news/working-with-the-jcrop-plugin/ 所示。
我使用 JCrop并尝试通过输入字段设置宽度和高度。 如果我在高度字段中输入 400 像素,Jcrop 会将选择区域的大小调整为 279 像素。我不理解这种行为。它应该将其调整为输入的 400 像素.
我是一名优秀的程序员,十分优秀!