edit: creation du script découpe

v1-com-officielle/cutter/cutter.css

@@ -29,9 +29,9 @@ body, html {
 }
 
 body {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
+  min-width: 100vw;
+  min-height: 100vh;
+  overflow: auto;
 }
 
 :root {
@@ -70,3 +70,14 @@ h1 {
   margin-left: auto;
   margin-right: auto;
 }
+
+canvas{
+  max-width: 100%;
+}
+
+#cutter-panel{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 3.33px;
+  margin-top: 13.12px;
+}

v1-com-officielle/cutter/cutter.js

@@ -1,42 +1,47 @@
-const CANVAS = document.getElementById("ui-canvas")
-const UI_CUTTER = new Image(CANVAS)
 const FORM = document.getElementById("cutter-form")
-
-async function updateFromForm(){
-    let data = new FormData(FORM)
-
-    let image = data.get("image")
-    if(image.size > 0){
-        if(UI_CUTTER.currentImageFile != image){
-            await UI_CUTTER.setImage(image)
-            UI_CUTTER.clearGlitch()
-        }
-    } else {
-        UI_CUTTER.clearImage()
-    }
-
-    document.getElementById("welcome-panel").hidden = image.size > 0
-    document.getElementById("glitch-panel").hidden = image.size == 0
-
-    UI_CUTTER.render()
-}
+const BUTTON = document.getElementById("download")
+const IMAGE = new Image()
+let rowCount
+let maxCount
 
 FORM.addEventListener("submit", e => {
         e.preventDefault()
-        updateFromForm()
+        const data = new FormData(FORM)
+        IMAGE.src = URL.createObjectURL(data.get('image'))
+        rowCount = data.get('rows')
+        console.log('ça marche :', data)
     })
 
-FORM.addEventListener("reset", e => {
-        FORM.elements["image"].value = ""
-        updateFromForm()
-    })
-
-document.getElementById("download-btn").addEventListener("click", async e => {
-    e.preventDefault();
-    let data = await UI_CUTTER.toBlob("image/jpeg", 1);
-    let a = document.createElement('a')
-    a.href = URL.createObjectURL(data)
-    a.download = UI_CUTTER.currentImageFile.name
-    a.click()
-    setTimeout(() => URL.revokeObjectURL(a.href), 10000)
+IMAGE.addEventListener('load', e => {
+    document.getElementById('cutter-panel').replaceChildren()
+    for(let i = 0; i<rowCount; i++){
+        for (let j = 0; j<3; j++){
+            let e = document.createElement('canvas')
+            e.width = 1080
+            e.height = 1350
+            let context = e.getContext('2d')
+            context.fillStyle = 'red'
+            context.drawImage(IMAGE,
+                j*1080, i*1350,
+                1080, 1350,
+                0, 0,
+                1080, 1350
+            )
+            document.getElementById('cutter-panel').append(e)
+        }
+    }
+})
+
+BUTTON.addEventListener('click', e => {
+    let imgList = document.querySelectorAll('canvas')
+    maxCount = imgList.length
+    for (let [i, img] of imgList.entries()){
+        img.toBlob(b => {
+            let aEl = document.createElement('a')
+            let index = maxCount - i
+            aEl.href = URL.createObjectURL(b)
+            aEl.download = 'img-' + index + '.jpg'
+            aEl.click()
+        },'image/jpeg',1)
+    }
 })

v1-com-officielle/cutter/index.html

@@ -13,15 +13,13 @@
             <h1>Insta Ninja</h1>
             <p>Séléctionne un photo pour la découper<br>en une grille au format du feed insta</p>
 
-            <input type="file" name="image" accept="image/jpg,image/jpeg,image/png,image/webp" />
+                <input type="number" name="rows" value="2" min="1">
+            <input type="file" name="image" accept="image/jpg,image/jpeg,image/png,image/webp" required/>
+            <button>Cut !</button>
         </div>
-        <div id="cutter-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 id="cutter-panel">
         </div>
+        <button id="download">Télécharger !</button>
     </form>
 
     <script type="module" src="cutter.js"></script>