Make avatar round and center/resize image properly.

converse.js

@@ -2074,7 +2074,12 @@
                 var img = new Image();   // Create new Image object
                 img.onload = function () {
                     var ratio = img.width/img.height;
-                    ctx.drawImage(img, 0,0, 35*ratio, 35);
+                    if (ratio < 1) {
+                        ctx.drawImage(img, 0,0, 32, 32*(1/ratio));
+                    } else {
+                        ctx.drawImage(img, 0,0, 32, 32*ratio);
+                    }
+
                 };
                 img.src = img_src;
                 this.$el.find('.chat-title').before(canvas);

css/converse.css

@@ -1241,6 +1241,7 @@
   padding: 5px;
   position: relative; }
   #conversejs .chat-head .avatar {
+    border-radius: 50%;
     float: left; }
   #conversejs .chat-head.chat-head-chatbox {
     background-color: #F4A261; }

sass/_chatbox.scss

@@ -15,6 +15,7 @@
         padding: 5px;
         position: relative;
         .avatar {
+            border-radius: 50%;
             float: left;
         }
         &.chat-head-chatbox {