webp uploads

Author: rgantzos

features/features.json

@@ -1,4 +1,9 @@
 [
+  {
+    "version": 2,
+    "id": "webp-uploads",
+    "versionAdded": "v4.0.0"
+  },
   {
     "version": 2,
     "id": "explore-filter",

features/webp-uploads/data.json

@@ -0,0 +1,10 @@
+{
+  "title": "WEBP Uploads",
+  "description": "Allows you to upload webp images in the editor for new sprites, costumes and stage backdrops.",
+  "credits": [
+    { "username": "rgantzos", "url": "https://scratch.mit.edu/users/rgantzos/" }
+  ],
+  "type": ["Editor"],
+  "tags": ["New", "Featured"],
+  "scripts": [{ "file": "script.js", "runOn": "/projects/*" }]
+}

features/webp-uploads/script.js

@@ -0,0 +1,173 @@
+export default async function ({ feature, console }) {
+  let fileInput = {
+    costume: null,
+    sprite: null,
+    stage: null,
+  };
+
+  ScratchTools.waitForElements(
+    "div[class*='asset-panel_wrapper_'] input[type=file]",
+    function (input) {
+      fileInput.costume = input;
+
+      fileInput.costume.parentElement.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+
+        let input = document.createElement("input");
+        input.accept = ".svg, .png, .bmp, .jpg, .jpeg, .gif, .webp";
+        input.setAttribute("multiple", null);
+        input.type = "file";
+
+        let files = [];
+
+        input.addEventListener("change", async function () {
+          const dataTransfer = new DataTransfer();
+
+          for (var i in input.files) {
+            let file = input.files[i];
+            if (file?.type?.startsWith("image/")) {
+              if (file.type === "image/webp") {
+                let blob = await convertWebPFileToPng(file);
+                file = new File([blob], file.name.split(".")[0] + ".png", {
+                  type: "image/png",
+                });
+                dataTransfer.items.add(file);
+              } else {
+                dataTransfer.items.add(file);
+              }
+            }
+          }
+
+          fileInput.costume.files = dataTransfer.files;
+
+          fileInput.costume.dispatchEvent(
+            new Event("change", { bubbles: true })
+          );
+        });
+
+        input.click();
+      });
+    }
+  );
+
+  ScratchTools.waitForElements(
+    "div[class*='sprite-selector_sprite-selector_'] input[type=file]",
+    function (input) {
+      fileInput.sprite = input;
+
+      fileInput.sprite.parentElement.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+
+        let input = document.createElement("input");
+        input.accept = ".svg, .png, .bmp, .jpg, .jpeg, .gif, .webp";
+        input.setAttribute("multiple", null);
+        input.type = "file";
+
+        let files = [];
+
+        input.addEventListener("change", async function () {
+          const dataTransfer = new DataTransfer();
+
+          for (var i in input.files) {
+            let file = input.files[i];
+            if (file?.type?.startsWith("image/")) {
+              if (file.type === "image/webp") {
+                let blob = await convertWebPFileToPng(file);
+                file = new File([blob], file.name.split(".")[0] + ".png", {
+                  type: "image/png",
+                });
+                dataTransfer.items.add(file);
+              } else {
+                dataTransfer.items.add(file);
+              }
+            }
+          }
+
+          fileInput.sprite.files = dataTransfer.files;
+
+          fileInput.sprite.dispatchEvent(
+            new Event("change", { bubbles: true })
+          );
+        });
+
+        input.click();
+      });
+    }
+  );
+
+  ScratchTools.waitForElements(
+    "div[class*='stage-selector_stage-selector_'] input[type=file]",
+    function (input) {
+      fileInput.stage = input;
+
+      fileInput.stage.parentElement.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+
+        let input = document.createElement("input");
+        input.accept = ".svg, .png, .bmp, .jpg, .jpeg, .gif, .webp";
+        input.setAttribute("multiple", null);
+        input.type = "file";
+
+        let files = [];
+
+        input.addEventListener("change", async function () {
+          const dataTransfer = new DataTransfer();
+
+          for (var i in input.files) {
+            let file = input.files[i];
+            if (file?.type?.startsWith("image/")) {
+              if (file.type === "image/webp") {
+                let blob = await convertWebPFileToPng(file);
+                file = new File([blob], file.name.split(".")[0] + ".png", {
+                  type: "image/png",
+                });
+                dataTransfer.items.add(file);
+              } else {
+                dataTransfer.items.add(file);
+              }
+            }
+          }
+
+          fileInput.stage.files = dataTransfer.files;
+
+          fileInput.stage.dispatchEvent(new Event("change", { bubbles: true }));
+        });
+
+        input.click();
+      });
+    }
+  );
+
+  async function convertWebPFileToPng(webpFile) {
+    try {
+      const img = new Image();
+      const webpUrl = URL.createObjectURL(webpFile);
+      img.src = webpUrl;
+
+      await new Promise((resolve, reject) => {
+        img.onload = resolve;
+        img.onerror = reject;
+      });
+
+      const canvas = document.createElement("canvas");
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(img, 0, 0);
+
+      const pngBlob = await new Promise((resolve) => {
+        canvas.toBlob(resolve, "image/png");
+      });
+
+      URL.revokeObjectURL(webpUrl);
+
+      return pngBlob;
+    } catch (error) {
+      console.error("Error converting webp to png:", error);
+      throw error;
+    }
+  }
+}