I'm not getting proper cropping in my preview, and also, when I save the cropping image, it doesn't really crop the image.
When I'm trying to drag the cropping window, it stretches my image, and my image doesn't stay in one place, it'll move around
This shows that the preview image is out of preview window.
This shows that my preview image is being stretched.
Here is my user.js.coffee
jQuery(document).ready ($) ->
jQuery ->
new PicCropper()
class PicCropper
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'
Here's my users_controller
def update
if params[:user][:password].blank?
[:password,:password_confirmation,:current_password].collect{|p| params[:user].delete(p) }
else
@user.errors[:base] << "The password you entered is incorrect" unless @user.valid_password?(params[:user][:current_password])
end
@user = User.find(params[:id])
if @user.update_attributes(params[:user])
if params[:user][:profile_pic].present?
render :crop
else
redirect_to @user, notice: "Successfully updated image."
end
else
render :action => 'edit'
end
Can anyone pinpoint why I'm getting this?
Thanks
Checkout the new JCrop version https://github.com/maxd/jcrop-rails-v2