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
Your dimensions seem wrong: You should consider variable dimensions images so, I suggest you Study this jquery example it may be helpfull to you (I hope)
It does it dynamicaly
JS
HTML