Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

README.md

we_avatar

Choose an avatar image from your webcam or a file upload using HTML5 and jQuery

View Demo

Requirements

Installation

1. Add we_avatar.js and we_avatar.css to your project.

2. Place this markup

<div id="user_avatar" class="we_avatar centered_content" 
    data-mode="empty"
    data-image-url=""
    data-image-dataurl=""
    data-post-url=""
    data-delete-url=""
    data-save-success-msg=""
    data-save-error-msg=""
    data-delete-confirm=""
    data-delete-success-msg=""
    data-delete-error-msg=""
    style="width:160px; height:120px">
</div>
<div id="user_avatar_toolbar" class="we_avatar_toolbar"></div>

<div id="user_avatar_msg" class="we_avatar_msg alert alert-info"></div>

3. Customize

  • data-mode => "image" if there's already an image to show
  • data-image-url => URL of the image to show
  • data-image-dataurl => If you prefer, you can load the image in base64 here
  • data-post-url => URL where the upload should be POSTed.
  • data-delete-url => URL where a DELETE request will be made to delete the image.
  • data-save-success-msg => Success save message
  • data-save-error-msg => Error save message
  • data-delete-confirm => Delete confirm question
  • data-delete-success-msg => Success delete message
  • data-delete-error-msg => Error delete message
  • style => Size of the viewer/uploader

4. Fire it up

<script type="text/javascript">
jQuery(function(){
    we_start("user_avatar");
})
</script>

Note: Obviously you can change "user_avatar" to whatever you want.

5. Code the back-end side

def upload_avatar
    @user = User.find(params[:id])
    if params[:dataurl]
        if @user.update_attribute( :avatar, params[:dataurl] )
            render text: "OK"
        else
            render text: "Error, try again"
        end
    end     
end

To-Do

  • file upload -> RESIZED preview on canvas
  • CONFIG: button overlay texts & localized texts
  • CONFIG: height and width (canvas & posted image)

About

Choose an avatar image from your webcam or a file upload using HTML5 and jQuery

Resources

License

Releases

No releases published

Packages

No packages published