Allow creating GIF animations

README.fr.md

@@ -0,0 +1,14 @@
+# Pixture
+
+## Exécuter un serveur de développement
+
+```bash
+npm install
+npm run dev
+```
+
+## Construire un site statique
+
+```bash
+npm run build
+```

README.md

@@ -1 +1,14 @@
 # Pixture
+
+## Run a development server
+
+```bash
+npm install
+npm run dev
+```
+
+## Build a static site
+
+```bash
+npm run build
+```

package.json

@@ -10,9 +10,11 @@
     "lint": "eslint \"src/**/*.vue\" \"src/**/*.ts\""
   },
   "dependencies": {
+    "gif.js": "^0.2.0",
     "vue": "^3.3.11"
   },
   "devDependencies": {
+    "@types/gif.js": "^0.2.5",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/eslint-config-typescript": "^12.0.0",

src/components/ImageCollection.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue';
+import * as GIF from 'gif.js';
 
 defineEmits<{
   selected: [image: HTMLImageElement]
@@ -22,6 +23,24 @@ function onDragStart(event: DragEvent, idx: number): void {
   event.dataTransfer!.setData('text/plain', idx.toString());
 }
 
+function onAnimateClick(): void {
+  // @ts-expect-error wrong type definition
+  const FixedGIF = GIF.default as typeof GIF;
+  const gif = new FixedGIF({
+    workerScript: new URL('gif.js/dist/gif.worker.js', import.meta.url).toString(),
+  });
+  images.value.forEach((img) => gif.addFrame(img, { delay: 200 }));
+  gif.on('finished', (blob: Blob) => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'animation.gif';
+    a.click();
+    URL.revokeObjectURL(url);
+  });
+  gif.render();
+}
+
 defineExpose({
   images
 })
@@ -34,6 +53,9 @@ defineExpose({
     <div v-for="(img, idx) in images" :key="idx" class="image-file">
       <img :src="img.src" width="64" height="64" alt="" draggable="true" @click="$emit('selected', img)" @dragstart="onDragStart($event, idx)" />
     </div>
+    <button v-if="images.length" @click="onAnimateClick">
+      Animate
+    </button>
   </div>
 </template>