client side image crop for profile pics

This commit is contained in:
Connor Turland 2014-11-03 21:26:08 -05:00
parent 6ecdd1076e
commit 4646bf9668
2 changed files with 34 additions and 3 deletions

View file

@ -4437,7 +4437,37 @@ Metamaps.Account = {
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function(e) { reader.onload = function(e) {
$('.userImageDiv img').attr('src', reader.result); var $canvas = $('<canvas>').attr({
width: 84,
height: 84
});
var context = $canvas[0].getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
$('.userImageDiv img').hide();
var imgWidth = imageObj.width;
var imgHeight = imageObj.height;
var dimensionToMatch = imgWidth > imgHeight ? imgHeight : imgWidth;
// draw cropped image
var nonZero = Math.abs(imgHeight - imgWidth) / 2;
var sourceX = dimensionToMatch === imgWidth ? 0 : nonZero;
var sourceY = dimensionToMatch === imgHeight ? 0 : nonZero;
var sourceWidth = dimensionToMatch;
var sourceHeight = dimensionToMatch;
var destX = 0;
var destY = 0;
var destWidth = 84;
var destHeight = 84;
//debugger;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
$('.userImageDiv').prepend($canvas);
};
imageObj.src = reader.result;
}; };
if (file) { if (file) {
@ -4449,7 +4479,8 @@ Metamaps.Account = {
removePicture: function(){ removePicture: function(){
var self = Metamaps.Account; var self = Metamaps.Account;
$('.userImage img').attr('src', '/assets/user.png'); $('.userImageDiv canvas').remove();
$('.userImage img').attr('src', '/assets/user.png').show();
$('.userImageMenu').hide(); $('.userImageMenu').hide();
var input = $('#user_image'); var input = $('#user_image');

View file

@ -293,7 +293,7 @@ input[type="submit"]:active {
margin-top: 32px; margin-top: 32px;
cursor: pointer; cursor: pointer;
} }
.edit_user .userImage img { .edit_user .userImage img, .edit_user .userImage canvas {
border-radius: 42px; border-radius: 42px;
} }
.edit_user .editPhoto { .edit_user .editPhoto {