For several people Avatar seems to be an important aspect in defining their online identity. If you have used social networking sites such as Twitter and Facebook you will be aware of the fact that they allow you to pick a avatar for your profile but when doing so the major problem you run into is changing and resizing your avatar the way you want to for your profile. If you have been facing this problem then do not worry as you are not alone , there are several people who face issues with changing and resizing avatars and this post is written with the intent of easing the task of all such worrisome individuals. Web Applications which make use of Avatars should have the privilege to change the Avatars. However you would definitely want to make the changes and resizing of the Avatar easily. There are several Web Applications which start with a user’s Facebook Avatar , Gravatar , Twitter Avatar and this is a regarded as a smart move by the developers because these Avatars provide a sense of ownership above a virtual space and thus having a way to get them have their preferred avatar is at all times good for engagement.
Work around of Drag and Drop
The most important that needs to be considered when resizing or changing the Avatars is to handle the Drop Event for the reason that it is the Drop Event where you get access to the file and you can make whatever changes you want to make. In order to deal with this event you will have to make use f jQuery as shown below :
//This line of code is required for accessing the Drag and Drop file
jQuery.event.props.push (‘data transfer’);
$(“Body”).on(‘drop’, function(event) {
//Otherwise the web browser will open the file
Event.prevent.Default();
//Perform some operation on the files
Var files=event.dataTransfer.files;
}
Nevertheless the above code will not work as you need to add that extra line of code for preventing the default action of the Drag over event by using that event so as to make some user interface changes that focus on Dropability as shown below :
$(“Body”).on(‘dragover’,function(event) {
// Do something to UI to make page look droppable
// Required for drop to work
Return false;
});
If the user does not want to perform the drop in that case remove the User interface change by using the below line of code :
$(“Body”).on(‘dragover’,function(event) {
//Remove UI Change
}};
How to deal with the dropped file ?
Drag and Drop can be performed with several multiple files however here we are dealing with only one file so let us just make use of the first one.
$(“Body”).on(‘drop’, function(event) {
//Otherwise the web browser will open the file
Event.prevent.Default();
Var file=event.dataTransfer.files[0];
If(file.type.match(‘image.*’)){
//Handle the file
}
Else
{
// However you want to handle error that dropped file wasn’t an image
}
However if you are good programmer in that case you will rather loop through all the files first than rejecting based on the first file.
Avatar Resizing
When it is about resizing images there are various server side ways in which this can be done and this requires you to have a round trip which is a slow process and as well transfer of potentially huge files which is again a slow process. Thus it is good to resize the avatar as per your size requirements on the client side for your application as it is wicked fast. This is just so simple create a and after that draw the image to the canvas and the start exporting the canvas as a Data URI. There are certain ready to use scripts available which should be included before you write all this custom code.
Avatar Squaring
Squaring Avatars is a little complex and tricky process. There are certain questions you need to ask yourself before Squaring :
- Do you just use rectangles and center them afterwards ?
- Do you crop images so that it is a Square ?
- Is it that you apply whitespaces around the edges of the image so that it is a square?
- In case you crop the image from which point you actually start cropping?
- Do you crop the image after resizing it or before resizing it?
You should go about with cropping and not bother the users about all this. There are different ways for building UI cropping toll so that the users can select their own crop however it is good not to make it an overhead for them and simply do it automatically. You should make it a point to crop them from top or left.
Resizing or Cropping
With other parts all set now you can crop and resize your avatar by making use of a new script placeNewAvatar. It is a customized callback function that you will provide which will take input as the new resized data URI which we want to place on the page.
Upload and Save Avatar
After having resized the avatar you will probably want to save the resized avatar and not the original one by keeping things low in terms of storage and fast when it is about upload. It would be silly on your part to trigger the complete web page load just for uploading the file for the reason that you are already using drag and drop. Thus you should prefer Ajaxing the file to the server. If your server is fine in accepting and saving the complete Data URI then go ahead with it but if you use any other kind of asset host then it will possibly ask for a real file and not just data URI. As well you will want to POST them form or multipart data and not a mere string. Thus this will require you to change the data URI into a real file. You as well cannot make use of jQuery to Ajax the file as the methods of Ajax will not allow you to pass the Form Data() method thus you need to do it manually.
Relevant CSS Bits
If you are dealing with only the drop event on the body then you will have to ensure that the body has height at least as tall as that of the page because there could be some extra space present at the bottom which will not take the drop event. Talking about Drag event you need to know that it not just fired only by files from outside any web browser window but as well you can drag it from a picture that is already present on the web page.