feat: add webp support

packages/scratch-gui/src/components/sprite-selector/sprite-selector.jsx

@@ -120,7 +120,7 @@ const SpriteSelectorComponent = function (props) {
                         title: intl.formatMessage(messages.addSpriteFromFile),
                         img: fileUploadIcon,
                         onClick: onFileUploadClick,
-                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .sprite2, .sprite3, .gif',
+                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .sprite2, .sprite3, .gif, .webp',
                         fileChange: onSpriteUpload,
                         fileInput: spriteFileInput,
                         fileMultiple: true

packages/scratch-gui/src/components/stage-selector/stage-selector.jsx

@@ -102,7 +102,7 @@ const StageSelector = props => {
                         title: intl.formatMessage(messages.addBackdropFromFile),
                         img: fileUploadIcon,
                         onClick: onBackdropFileUploadClick,
-                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .gif',
+                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .gif, .webp',
                         fileChange: onBackdropFileUpload,
                         fileInput: fileInputRef,
                         fileMultiple: true

packages/scratch-gui/src/containers/costume-tab.jsx

@@ -351,7 +351,7 @@ class CostumeTab extends React.Component {
                         title: intl.formatMessage(addFileMessage),
                         img: fileUploadIcon,
                         onClick: this.handleFileUploadClick,
-                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .gif',
+                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .gif, .webp',
                         fileChange: this.handleCostumeUpload,
                         fileInput: this.setFileInput,
                         fileMultiple: true

packages/scratch-gui/src/lib/file-uploader.js

@@ -1,6 +1,7 @@
 import {BitmapAdapter, sanitizeSvg} from '@scratch/scratch-svg-renderer';
 import randomizeSpritePosition from './randomize-sprite-position.js';
 import bmpConverter from './bmp-converter';
+import webpConverter from './webp-converter';
 import gifDecoder from './gif-decoder';
 
 /**

packages/scratch-gui/src/lib/webp-converter.js

@@ -0,0 +1,27 @@
+export default webpImage => new Promise(resolve => {
+    // If the input is an ArrayBuffer, we need to convert it to a `Blob` and give it a URL so we can use it as an <img>
+    // `src`. If it's a data URI, we can use it as-is.
+    const imageUrl = webpImage instanceof String ?
+        webpImage :
+        window.URL.createObjectURL(new Blob([webpImage], {type: 'image/webp'}));
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    const image = document.createElement('img');
+
+    image.addEventListener('load', () => {
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+        ctx.drawImage(image, 0, 0);
+
+        const dataUrl = canvas.toDataURL('image/png');
+
+        // Revoke URL. If a blob URL was generated earlier, this allows the blob to be GC'd and prevents a memory leak.
+        window.URL.revokeObjectURL(imageUrl);
+
+        resolve(dataUrl);
+    });
+
+    image.setAttribute('src', imageUrl);
+});

packages/scratch-gui/test/integration/costumes.test.js

@@ -161,6 +161,20 @@ describe('Working with costumes', () => {
         await expect(logs).toEqual([]);
     });
 
+    test('Adding a webp from file', async () => {
+        await loadUri(uri);
+        await clickText('Costumes');
+        const el = await findByXpath('//button[@aria-label="Choose a Costume"]');
+        await driver.actions().mouseMove(el)
+            .perform();
+        await driver.sleep(500); // Wait for thermometer menu to come up
+        const input = await findByXpath('//input[@type="file"]');
+        await input.sendKeys(path.resolve(__dirname, '../fixtures/webpfile.webp'));
+        await clickText('webpfile', scope.costumesTab);
+        const logs = await getLogs();
+        await expect(logs).toEqual([]);
+    });
+
     test('Adding several costumes with a gif', async () => {
         await loadUri(uri);
         await clickText('Costumes');