Choose an avatar image from your webcam or a file upload using HTML5 and jQuery
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
demo.html
we_avatar.css
we_avatar.js

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)