diff --git a/v1-com-officielle/cutter/cutter.css b/v1-com-officielle/cutter/cutter.css index a2f7b69..68614e5 100644 --- a/v1-com-officielle/cutter/cutter.css +++ b/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; +} diff --git a/v1-com-officielle/cutter/cutter.js b/v1-com-officielle/cutter/cutter.js index 3a9970d..9537dc6 100644 --- a/v1-com-officielle/cutter/cutter.js +++ b/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 { + 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) + } }) diff --git a/v1-com-officielle/cutter/index.html b/v1-com-officielle/cutter/index.html index b04d2a9..cfa296e 100644 --- a/v1-com-officielle/cutter/index.html +++ b/v1-com-officielle/cutter/index.html @@ -13,15 +13,13 @@

Insta Ninja

Séléctionne un photo pour la découper
en une grille au format du feed insta

- + + + -