Compress image prior to uploading

zerobin/default_settings.py

@@ -20,7 +20,7 @@ MENU = (
 
 # Size limit of the paste content in bytes. Be careful, allowing a size too big can
 # slow down the user's browser
-MAX_SIZE = 1024 * 500
+MAX_SIZE = 1024 * 600
 
 # Display a tiny counter for pastes created.
 DISPLAY_COUNTER = True

zerobin/static/js/behavior.js

@@ -226,6 +226,45 @@ var app = new Vue({
 
     },
 
+    compressImage: function (base64) {
+      var canvas = document.createElement('canvas')
+      var img = document.createElement('img')
+
+      return new Promise(function (resolve, reject) {
+        img.onload = function () {
+          var width = img.width;
+          var height = img.height;
+          var biggest = width > height ? width : height;
+          var maxHeight = height;
+          var maxWidth = width;
+
+          if (width > height) {
+            if (width > maxWidth) {
+              height = Math.round((height *= maxWidth / width));
+              width = maxWidth;
+            }
+          } else {
+            if (height > maxHeight) {
+              width = Math.round((width *= maxHeight / height));
+              height = maxHeight;
+            }
+          }
+          canvas.width = width;
+          canvas.height = height;
+
+          var ctx = canvas.getContext('2d');
+          ctx.drawImage(img, 0, 0, width, height);
+
+          resolve(canvas.toDataURL('image/jpeg', 0.5));
+        }
+        img.onerror = function (err) {
+          reject(err);
+        }
+        img.src = base64;
+
+      })
+    },
+
     /**
       On the create paste page:
       On click on the send button, compress and encrypt data before
@@ -258,7 +297,15 @@ var app = new Vue({
 
           var key = zerobin.makeKey(256);
 
-          zerobin.encrypt(key, paste,
+          var promise = new Promise(function (resolve, reject) {
+            resolve(paste);
+          }); // noop to avoid branching
+          if (paste.indexOf('data:image') == 0) {
+            promise = app.compressImage(paste);
+          }
+
+          promise.then(function (base64) {
+              zerobin.encrypt(key, base64,
 
                 function () {
                   bar.set('Encoding to base64...', '45%')
@@ -290,8 +337,9 @@ var app = new Vue({
                     form.forEach(function (node) {
                       node.disabled = false;
                     });
-                zerobin.message('danger', ('The encrypted file was <strong class="file-size">' + readableFsize +
-                    '</strong>KB. You have reached the maximum size limit of ' + readableMaxsize + 'KB.'),
+
+                    zerobin.message('danger', ('The file was <strong class="file-size">' + readableFsize +
+                        '</strong>KB after encryption. You have reached the maximum size limit of ' + readableMaxsize + 'KB.'),
                       'Warning!', true);
                     return;
                   }
@@ -339,7 +387,18 @@ var app = new Vue({
                       'Error');
                   });
 
+                })
+            }),
+            function (err) {
+              debugger;
+              form.forEach(function (node) {
+                node.disabled = false;
               });
+              app.isLoading = false;
+              zerobin.message('danger', 'Paste could not be encrypted. Aborting.',
+                'Error');
+            };
+
         } catch (err) {
           form.forEach(function (node) {
             node.disabled = false;
@@ -878,7 +937,7 @@ if (content && key) {
               "The paste did not seem to be code, so it " +
               "was not colorized. ",
               '', false, undefined, {
-                message: "Force coloration",
+                message: "Click here to force coloration",
                 callback: app.handleForceColoration
               });
           }