Update display: MLH-styled sky

Author: mpsiebert

index.html

@@ -93,7 +93,6 @@
             max-width: 180px;
             max-height: 180px;
             display: block;
-            mix-blend-mode: multiply;
         }
 
         .bird-label {
@@ -132,6 +131,28 @@
         const kfStyle    = document.getElementById('dynamic-keyframes');
         const countLabel = document.getElementById('bird-count');
 
+        function removeWhiteBackground(img) {
+            try {
+                const canvas = document.createElement('canvas');
+                canvas.width  = img.naturalWidth;
+                canvas.height = img.naturalHeight;
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(img, 0, 0);
+                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                const data = imageData.data;
+                for (let i = 0; i < data.length; i += 4) {
+                    // If pixel is white or near-white, make it transparent
+                    if (data[i] > 235 && data[i+1] > 235 && data[i+2] > 235) {
+                        data[i+3] = 0;
+                    }
+                }
+                ctx.putImageData(imageData, 0, 0);
+                img.src = canvas.toDataURL('image/png');
+            } catch(e) {
+                console.warn('Could not process image:', e);
+            }
+        }
+
         async function fetchManifest() {
             try {
                 const res = await fetch('manifest.json?t=' + Date.now());
@@ -172,10 +193,12 @@
             const timing = bird.animation.timing_function || 'ease-in-out';
             wrapper.style.animation = bird.animation.animation_name + ' ' + dur + ' ' + timing + ' infinite';
 
-            // the image
+            // the image — remove white background via canvas on load
             const img = document.createElement('img');
-            img.src       = bird.image + '?raw=true';
+            img.crossOrigin = 'anonymous';
+            img.src       = bird.image;
             img.className = 'bird';
+            img.onload = function() { removeWhiteBackground(img); };
             wrapper.appendChild(img);
 
             // name + origin label