create a thumbnail when uploading images from whiteboard

www/common/common-thumbnail.js

@@ -0,0 +1,51 @@
+define([
+    '/bower_components/tweetnacl/nacl-fast.min.js',
+], function () {
+    var Nacl = window.nacl;
+    var Thumb = {
+        dimension: 150, // thumbnails are all 150px
+    };
+
+    // create thumbnail image from metadata
+    // return an img tag, or undefined if anything goes wrong
+    Thumb.fromMetadata = function (metadata) {
+        if (!metadata || typeof(metadata) !== 'object' || !metadata.thumbnail) { return; }
+        try {
+            var u8 = Nacl.util.decodeBase64(metadata.thumbnail);
+            var blob = new Blob([u8], {
+                type: 'image/png'
+            });
+            var url = URL.createObjectURL(blob);
+            var img = new Image();
+            img.src = url;
+            img.width = Thumb.dimension;
+            img.height = Thumb.dimension;
+            return img;
+        } catch (e) {
+            console.error(e);
+            return;
+        }
+    };
+
+    // assumes that your canvas is square
+    // nodeback returning blob
+    Thumb.fromCanvas = function (canvas, cb) {
+        canvas = canvas;
+        var c2 = document.createElement('canvas');
+        var d = Thumb.dimension;
+        c2.width = d;
+        c2.height = 2;
+
+        var ctx = c2.getContext('2d');
+        ctx.drawImage(canvas, 0, 0, d, d);
+        c2.toBlob(function (blob) {
+            cb(void 0, blob);
+        });
+    };
+
+    Thumb.fromVideo = function (video, cb) {
+        cb = cb; // WIP
+    };
+
+    return Thumb;
+});

www/whiteboard/main.js

@@ -11,6 +11,7 @@ define([
     '/common/cryptget.js',
     '/whiteboard/colors.js',
     '/customize/application_config.js',
+    '/common/common-thumbnail.js',
     '/bower_components/secure-fabric.js/dist/fabric.min.js',
     '/bower_components/file-saver/FileSaver.min.js',
 
@@ -19,7 +20,7 @@ define([
     'less!/customize/src/less/cryptpad.less',
     'less!/whiteboard/whiteboard.less',
     'less!/customize/src/less/toolbar.less',
-], function ($, Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, AppConfig) {
+], function ($, Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, AppConfig, Thumb) {
     var saveAs = window.saveAs;
     var Messages = Cryptpad.Messages;
 
@@ -212,13 +213,18 @@ window.canvas = canvas;
 
         module.FM = Cryptpad.createFileManager({});
         module.upload = function (title) {
-            $canvas[0].toBlob(function (blob) {
-                blob.name = title;
-                var reader = new FileReader();
-                reader.onloadend = function () {
-                    module.FM.handleFile(blob);
-                };
-                reader.readAsArrayBuffer(blob);
+            var canvas = $canvas[0];
+            var finish = function (thumb) {
+                canvas.toBlob(function (blob) {
+                    blob.name = title;
+                    module.FM.handleFile(blob, void 0, thumb);
+                });
+            };
+
+            Thumb.fromCanvas(canvas, function (e, blob) {
+                // carry on even if you can't get a thumbnail
+                if (e) { console.error(e); }
+                finish(blob);
             });
         };