handle transparent thumbnails in gallery games

microsoft · Jan 7, 2025 · 024e6d4 · 024e6d4
1 parent 7c7e90d
commit 024e6d4
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git a/docs/static/gamejam/lib/gamejam.js b/docs/static/gamejam/lib/gamejam.js
@@ -113,7 +113,7 @@ function makeRules() {
         function onLoad() {
             marked.setOptions({
                 // @ts-ignore
-                sanitizer: DOMPurify.sanitizer
+                sanitizer: DOMPurify.sanitizer,
             });
             var markdown = marked(this.responseText);
             var parent = document.getElementById("rules");
@@ -201,7 +201,8 @@ function makeGameCard(game) {
     var textLink = link.cloneNode();
     var img = document.createElement("img");
     img.src = "https://pxt.azureedge.net/api/".concat(game.id, "/thumb");
-    img.onerror = function () {
+    img.crossOrigin = "Anonymous";
+    var createPlaceholder = function () {
         var div = document.createElement("div");
         div.setAttribute("class", "placeholder");
         var logo = document.createElement("img");
@@ -210,6 +211,26 @@ function makeGameCard(game) {
         img.remove();
         link.appendChild(div);
     };
+    img.onerror = createPlaceholder;
+    img.onload = function () {
+        // sometimes the thumbnail is fully transparent even though the
+        // image loads
+        var canvas = document.createElement("canvas");
+        canvas.width = img.width;
+        canvas.height = img.height;
+        var context = canvas.getContext("2d");
+        context.drawImage(img, 0, 0);
+        var data = context.getImageData(0, 0, canvas.width, canvas.height);
+        for (var x = 0; x < data.width; x++) {
+            for (var y = 0; y < data.height; y++) {
+                var index = x * y * 4;
+                if (data.data[index + 3] !== 0) {
+                    return;
+                }
+            }
+        }
+        createPlaceholder();
+    };
     link.appendChild(img);
     card.appendChild(link);
     var label = document.createElement("div");

diff --git a/docs/static/gamejam/lib/gamejam.ts b/docs/static/gamejam/lib/gamejam.ts
@@ -229,7 +229,9 @@ function makeGameCard(game: Game) {
     let textLink = link.cloneNode() as HTMLElement;
     let img = document.createElement("img");
     img.src = `https://pxt.azureedge.net/api/${game.id}/thumb`;
-    img.onerror = () => {
+    img.crossOrigin = "Anonymous";
+
+    const createPlaceholder = () => {
         let div = document.createElement("div");
         div.setAttribute("class", "placeholder");
         let logo = document.createElement("img");
@@ -238,6 +240,29 @@ function makeGameCard(game: Game) {
         img.remove();
         link.appendChild(div);
     }
+
+    img.onerror = createPlaceholder;
+    img.onload = () => {
+        // sometimes the thumbnail is fully transparent even though the
+        // image loads
+        const canvas = document.createElement("canvas");
+        canvas.width = img.width;
+        canvas.height = img.height;
+
+        const context = canvas.getContext("2d")!;
+        context.drawImage(img, 0, 0);
+        const data = context.getImageData(0, 0, canvas.width, canvas.height);
+
+        for (let x = 0; x < data.width; x++) {
+            for (let y = 0; y < data.height; y++) {
+                const index = x * y * 4;
+                if (data.data[index + 3] !== 0) {
+                    return;
+                }
+            }
+        }
+        createPlaceholder();
+    }
     link.appendChild(img);
     card.appendChild(link);