Add low res images to map

extra/js/drive.js

@@ -74,6 +74,12 @@ window.loadFileAsync = function(fullPath, bitmap, callback) {
         generationCanvas.width = sm[0];
         generationCanvas.height = sm[1];
 
+        // Draw
+        var img = new Image;
+        img.onload = function(){
+            const ctx = generationCanvas.getContext('2d');
+            ctx.drawImage(img, 0, 0, sm[0], sm[1]);
+
             // Create dummy from data uri
             FS.createPreloadedFile(path, filename, generationCanvas.toDataURL(), true, true, function() {
                 // Return control to C++
@@ -87,6 +93,9 @@ window.loadFileAsync = function(fullPath, bitmap, callback) {
             }, console.error, false, false, () => {
                 try { FS.unlink(path + "/" + filename); } catch (err) {}
             });
+        };
+
+        img.src = sm[2];
     } else {
         if (bitmap) {
             console.warn('No sizemap for image', mappingKey);

extra/make_mapping.sh

@@ -22,7 +22,13 @@ if [ -f $file ]
 then
     sz=`identify -format "%w,%h" "${file}" 2>/dev/null`
     if [ $? -eq 0 ]; then
-        echo "\"$fl\": [${sz}]," >> bitmap-map.js
+        convert "$file" -resize 64x64\> "conv.png"
+        mimetype=$(file -bN --mime-type "conv.png")
+        content=$(base64 -w0 < "conv.png")
+        duri="data:$mimetype;base64,$content"
+        rm "conv.png"
+
+        echo "\"$fl\": [${sz},\"${duri}\"]," >> bitmap-map.js
     fi
 fi