From f4a206b26680cdb4a5a46c5e91b22bc8ab9b10d7 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Thu, 4 Jun 2015 11:55:23 -0700
Subject: [PATCH] Scale and crop avatars to 256 square thumbnails.

Fixes #213 // FREEBIE
---
 js/views/file_input_view.js       | 37 ++++++++++++++++++++++++++++++-
 js/views/new_conversation_view.js |  2 +-
 js/views/new_group_update_view.js |  4 ++--
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/js/views/file_input_view.js b/js/views/file_input_view.js
index 17f0ea53..ab801ff0 100644
--- a/js/views/file_input_view.js
+++ b/js/views/file_input_view.js
@@ -85,7 +85,7 @@
 
                     // loadImage.scale -> components/blueimp-load-image
                     var canvas = loadImage.scale(img, {
-                        canvas: true, maxWidth: 1920, maxHeight: 1920
+                        canvas: true, maxWidth: maxWidth, maxHeight: maxHeight
                     });
 
                     var quality = 0.95;
@@ -163,6 +163,41 @@
             return this.autoScale(file).then(this.readFile);
         },
 
+        getThumbnail: function() {
+            // Scale and crop an image to 256px square
+            var size = 256;
+            var file = this.file || this.$input.prop('files')[0];
+            if (file.type.split('/')[0] !== 'image' || file.type === 'image/gif') {
+                // nothing to do
+                return Promise.resolve();
+            }
+
+            return new Promise(function(resolve, reject) {
+                var url = URL.createObjectURL(file);
+                var img = document.createElement('img');
+                img.onerror = reject;
+                img.onload = function () {
+                    URL.revokeObjectURL(url);
+                    // loadImage.scale -> components/blueimp-load-image
+                    // scale, then crop.
+                    var canvas = loadImage.scale(img, {
+                        canvas: true, maxWidth: size, maxHeight: size,
+                        cover: true, minWidth: size, minHeight: size
+                    });
+                    canvas = loadImage.scale(canvas, {
+                        canvas: true, maxWidth: size, maxHeight: size,
+                        crop: true, minWidth: size, minHeight: size
+                    });
+
+                    // dataURLtoBlob -> components/blueimp-canvas-to-blob
+                    var blob = dataURLtoBlob(canvas.toDataURL('image/png'));
+
+                    resolve(blob);
+                };
+                img.src = url;
+            }).then(this.readFile);
+        },
+
         readFile: function(file) {
             var contentType = file.type;
             return new Promise(function(resolve, reject) {
diff --git a/js/views/new_conversation_view.js b/js/views/new_conversation_view.js
index cf4455da..551c704f 100644
--- a/js/views/new_conversation_view.js
+++ b/js/views/new_conversation_view.js
@@ -114,7 +114,7 @@
                 return;
             }
 
-            return this.avatarInput.getFile().then(function(avatarFile) {
+            return this.avatarInput.getThumbnail().then(function(avatarFile) {
                 var members = this.getRecipients().pluck('id');
                 textsecure.storage.groups.createNewGroup(members).then(function(group) {
                     return group.id;
diff --git a/js/views/new_group_update_view.js b/js/views/new_group_update_view.js
index fc50b172..92266e04 100644
--- a/js/views/new_group_update_view.js
+++ b/js/views/new_group_update_view.js
@@ -46,10 +46,10 @@
             };
         },
         send: function() {
-            return this.avatarInput.getFiles().then(function(avatarFiles) {
+            return this.avatarInput.getThumbnail().then(function(avatarFile) {
                 this.model.save({
                     name: this.$('.name').val(),
-                    avatar: avatarFiles[0],
+                    avatar: avatarFile,
                     members: _.union(this.model.get('members'), this.recipients_view.recipients.pluck('id'))
                 });
                 textsecure.messaging.updateGroup(