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,88 +297,108 @@ 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);
+          }
 
-            function () {
+          promise.then(function (base64) {
-              bar.set('Encoding to base64...', '45%')
+              zerobin.encrypt(key, base64,
-            },
-            function () {
-              bar.set('Compressing...', '65%')
-            },
-            function () {
-              bar.set('Encrypting...', '85%')
-            },
 
-            /* This block deals with sending the data, redirection or error handling */
+                function () {
-            function (content) {
+                  bar.set('Encoding to base64...', '45%')
+                },
+                function () {
+                  bar.set('Compressing...', '65%')
+                },
+                function () {
+                  bar.set('Encrypting...', '85%')
+                },
 
-              bar.set('Sending...', '95%');
+                /* This block deals with sending the data, redirection or error handling */
-              var data = {
+                function (content) {
-                content: content,
-                expiration: app.newPaste.expiration,
-                title: app.newPaste.title,
-                btcTipAddress: app.newPaste.btcTipAddress
-              };
-              var sizebytes = zerobin.count(JSON.stringify(data));
-              var oversized = sizebytes > zerobin.max_size; // 100kb - the others header information
-              var readableFsize = Math.round(sizebytes / 1024);
-              var readableMaxsize = Math.round(zerobin.max_size / 1024);
 
-              if (oversized) {
+                  bar.set('Sending...', '95%');
-                app.isLoading = false
+                  var data = {
-                form.forEach(function (node) {
+                    content: content,
-                  node.disabled = false;
+                    expiration: app.newPaste.expiration,
-                });
+                    title: app.newPaste.title,
-                zerobin.message('danger', ('The encrypted file was <strong class="file-size">' + readableFsize +
+                    btcTipAddress: app.newPaste.btcTipAddress
-                    '</strong>KB. You have reached the maximum size limit of ' + readableMaxsize + 'KB.'),
+                  };
-                  'Warning!', true);
+                  var sizebytes = zerobin.count(JSON.stringify(data));
-                return;
+                  var oversized = sizebytes > zerobin.max_size; // 100kb - the others header information
-              }
+                  var readableFsize = Math.round(sizebytes / 1024);
+                  var readableMaxsize = Math.round(zerobin.max_size / 1024);
 
-              fetch('/paste/create', {
+                  if (oversized) {
-                method: "POST",
+                    app.isLoading = false
-                body: new URLSearchParams(data)
+                    form.forEach(function (node) {
-              }).then(function (response) {
+                      node.disabled = false;
-                if (response.ok) {
+                    });
-                  bar.set('Redirecting to new paste...', '100%');
 
-                  response.json().then(function (data) {
+                    zerobin.message('danger', ('The file was <strong class="file-size">' + readableFsize +
-                    if (data.status === 'error') {
+                        '</strong>KB after encryption. You have reached the maximum size limit of ' + readableMaxsize + 'KB.'),
-                      zerobin.message('danger', data.message, 'Error');
+                      'Warning!', true);
+                    return;
+                  }
+
+                  fetch('/paste/create', {
+                    method: "POST",
+                    body: new URLSearchParams(data)
+                  }).then(function (response) {
+                    if (response.ok) {
+                      bar.set('Redirecting to new paste...', '100%');
+
+                      response.json().then(function (data) {
+                        if (data.status === 'error') {
+                          zerobin.message('danger', data.message, 'Error');
+                          form.forEach(function (node) {
+                            node.disabled = false;
+                          });
+                          app.isLoading = false;
+                        } else {
+                          if (app.support.localStorage) {
+                            zerobin.storePaste('/paste/' + data.paste + "?owner_key=" + data.owner_key + '#' + key);
+                          }
+                          window.location = ('/paste/' + data.paste + '#' + key);
+                        }
+                      })
+
+                    } else {
                       form.forEach(function (node) {
-                        node.disabled = false;
+                        node.disabled = false
                       });
                       app.isLoading = false;
-                    } else {
+                      zerobin.message(
-                      if (app.support.localStorage) {
+                        'danger',
-                        zerobin.storePaste('/paste/' + data.paste + "?owner_key=" + data.owner_key + '#' + key);
+                        'Paste could not be saved. Please try again later.',
-                      }
+                        'Error');
-                      window.location = ('/paste/' + data.paste + '#' + key);
                     }
-                  })
+                  }).catch(function (error) {
-
+                    form.forEach(function (node) {
-                } else {
+                      node.disabled = false;
-                  form.forEach(function (node) {
+                    });
-                    node.disabled = false
+                    app.isLoading = false;
+                    zerobin.message(
+                      'danger',
+                      'Paste could not be saved. Please try again later.',
+                      'Error');
                   });
-                  app.isLoading = false;
-                  zerobin.message(
-                    'danger',
-                    'Paste could not be saved. Please try again later.',
-                    'Error');
-                }
-              }).catch(function (error) {
-                form.forEach(function (node) {
-                  node.disabled = false;
-                });
-                app.isLoading = false;
-                zerobin.message(
-                  'danger',
-                  'Paste could not be saved. Please try again later.',
-                  '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
               });
           }