feat: add webp support

Author: mikebarkmin

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';
 
 /**
@@ -122,6 +123,12 @@ const costumeUpload = function (fileData, fileType, storage, handleCostume, hand
         });
         return; // Return early because we're triggering another proper costumeUpload
     }
+    case 'image/webp': {
+        webpConverter(fileData).then(dataUrl => {
+            costumeUpload(dataUrl, 'image/png', storage, handleCostume);
+        });
+        return; // Return early because we're triggering another proper costumeUpload
+    }
     case 'image/png': {
         costumeFormat = storage.DataFormat.PNG;
         assetType = storage.AssetType.ImageBitmap;

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

@@ -0,0 +1,17 @@
+export default webpImage => new Promise(resolve => {
+    const imageUrl = typeof webpImage === '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');
+        window.URL.revokeObjectURL(imageUrl);
+        resolve(dataUrl);
+    });
+    image.setAttribute('src', imageUrl);
+});

packages/scratch-gui/test/fixtures/webpfile.webp

@@ -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');