glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

client side image crop for profile pics

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

35
app/assets/javascripts/src/Metamaps.js
View file

@ -4437,7 +4437,37 @@ Metamaps.Account = {
var reader = new FileReader();
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) {
@ -4449,7 +4479,8 @@ Metamaps.Account = {
removePicture: function(){
var self = Metamaps.Account;
$('.userImage img').attr('src', '/assets/user.png');
$('.userImageDiv canvas').remove();
$('.userImage img').attr('src', '/assets/user.png').show();
$('.userImageMenu').hide();
var input = $('#user_image');

2
app/assets/stylesheets/application.css
View file

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