edit: creation du script découpe

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)
+    }
 })