Ajustement pour une interface minimale

v1-com-officielle/glitcher/glitcher.css

@@ -28,6 +28,12 @@ body, html {
     margin: 0;
 }
 
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
 :root {
     --back-color: black;
     --main-color: white;
@@ -41,6 +47,17 @@ body, html {
     font-weight: bold;
 }
 
+body > *{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 15px;
+}
+
+#welcome-panel {
+  text-align: center;
+}
+
 h1 {
     font-family: 'lineal', sans-serif;
     font-weight: bolder;
@@ -48,8 +65,8 @@ h1 {
 
 #ui-canvas {
   display: block;
+  max-width: calc(100vw - 30px);
+  max-height: calc(100vh - 30px);
   margin-left: auto;
   margin-right: auto;
-  max-width: 100vw;
-  max-height: 100vh;
 }

v1-com-officielle/glitcher/glitcher.js

@@ -9,11 +9,16 @@ async function updateFromForm(){
     
     let image = data.get("image")
     if(image.size > 0){
-        await UI_GLITCHER.setImage(image)
+        if(UI_GLITCHER.currentImageFile != image){
-        UI_GLITCHER.clearGlitch()
+            await UI_GLITCHER.setImage(image)
+            UI_GLITCHER.clearGlitch()
+        }
     } else {
         UI_GLITCHER.clearImage()
     }
+
+    document.getElementById("welcome-panel").hidden = image.size > 0
+    document.getElementById("glitch-panel").hidden = image.size == 0
     
     UI_GLITCHER.render()
 }
@@ -27,6 +32,21 @@ FORM.addEventListener("submit", e => {
         updateFromForm()
     })
 
+FORM.addEventListener("reset", e => {
+        FORM.elements["image"].value = ""
+        updateFromForm()
+    })
+
+document.getElementById("download-btn").addEventListener("click", async e => {
+    e.preventDefault();
+    let data = await UI_GLITCHER.toBlob("image/jpeg", 0.9);
+    let a = document.createElement('a')
+    a.href = URL.createObjectURL(data)
+    a.download = UI_GLITCHER.currentImageFile.name
+    a.click()
+    setTimeout(() => URL.revokeObjectURL(a.href), 10000)
+})
+
 CANVAS.addEventListener("pointerdown", e => {
     let pointerId = e.pointerId;
 

v1-com-officielle/glitcher/index.html

@@ -15,8 +15,12 @@
 
             <input type="file" name="image" accept="image/jpg, image/jpeg,image/png,image/webp" />
         </div>
-        <div id="glitch-panel">
+        <div id="glitch-panel" hidden>
             <canvas id="ui-canvas"></canvas>
+            <nav>
+                <button type="reset">Reset</button>
+                <button type="button" id="download-btn">Télécharger</button>
+            </nav>
         </div>
     </form>
 

v1-com-officielle/glitcher/lib/glitcher.js

@@ -221,28 +221,50 @@ export class Glitcher {
         this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR);
     }
 
-    resize(width, height){
+    async toBlob(type, quality) {
-        let computedStyle = window.getComputedStyle(this.canvas)
+        this.resize(this.currentImage.width, this.currentImage.height, true)
-        let maxWidth = parseFloat(computedStyle["max-width"])
+        this.render()
-        let maxHeight = parseFloat(computedStyle["max-height"])
+        let blob = await new Promise((res, rej) => this.canvas.toBlob((imageBlob) => {
-        
+            if(imageBlob){
-        if(window.devicePixelRatio){
+                res(imageBlob)
-            maxWidth *= window.devicePixelRatio
+            } else {
-            maxHeight *= window.devicePixelRatio
+                rej()
+            }
+        }, type, quality))
+        this.resize(this.currentImage.width, this.currentImage.height, false)
+        return blob
+    }
+
+    resize(width, height, force=false){
+        if(!force){
+
+            let computedStyle = window.getComputedStyle(this.canvas)
+            let maxWidth = parseFloat(computedStyle["max-width"])
+            let maxHeight = parseFloat(computedStyle["max-height"])
+            
+            if(window.devicePixelRatio){
+                maxWidth *= window.devicePixelRatio
+                maxHeight *= window.devicePixelRatio
+            }
+
+            if(Number.isNaN(maxWidth)){
+                maxWidth = width
+            }
+
+            if(Number.isNaN(maxHeight)){
+                maxHeight = height
+            }
+
+            let resize = resizeToFit("contain", {width, height}, {width: maxWidth, height: maxHeight})
+
+            this.canvas.width = resize.width
+            this.canvas.height = resize.height
+
+        } else {
+            this.canvas.width = width
+            this.canvas.height = height
         }
 
-        if(Number.isNaN(maxWidth)){
-            maxWidth = width
-        }
-
-        if(Number.isNaN(maxHeight)){
-            maxHeight = height
-        }
-
-        let resize = resizeToFit("contain", {width, height}, {width: maxWidth, height: maxHeight})
-
-        this.canvas.width = resize.width
-        this.canvas.height = resize.height
         this.videoCanvas.width = this.canvas.width
         this.videoCanvas.height = this.canvas.height
         this.ctx.viewport(0, 0, this.canvas.width, this.canvas.height);