Merge pull request scratchfoundation#5197 from paulkaplan/fix-backpack-thumbnailing

Draw backpack thumbnails smaller

Author: paulkaplan

src/lib/backpack/jpeg-thumbnail.js

@@ -3,15 +3,20 @@ const jpegThumbnail = dataUrl => new Promise((resolve, reject) => {
     image.onload = () => {
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d');
-        // TODO we may want to draw to a smaller, fixed size to optimize file size
-        canvas.width = image.width;
-        canvas.height = image.height;
+
+        const maxDimension = 96; // 3x the maximum displayed size of 32px
+
+        if (image.height > image.width) {
+            canvas.height = maxDimension;
+            canvas.width = (maxDimension / image.height) * image.width;
+        } else {
+            canvas.width = maxDimension;
+            canvas.height = (maxDimension / image.width) * image.height;
+        }
 
         ctx.fillStyle = 'white'; // Create white background, since jpeg doesn't have transparency
         ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-        ctx.drawImage(image, 0, 0);
-        // TODO we can play with the `quality` option here to optimize file size
+        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
         resolve(canvas.toDataURL('image/jpeg', 0.92 /* quality */)); // Default quality is 0.92
     };
     image.onerror = err => {