diff --git a/v1-com-officielle/glitcher/glitcher.css b/v1-com-officielle/glitcher/glitcher.css index 07f1fd5..c11813c 100644 --- a/v1-com-officielle/glitcher/glitcher.css +++ b/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; } \ No newline at end of file diff --git a/v1-com-officielle/glitcher/glitcher.js b/v1-com-officielle/glitcher/glitcher.js index 99bd0dc..df39c63 100644 --- a/v1-com-officielle/glitcher/glitcher.js +++ b/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) - UI_GLITCHER.clearGlitch() + if(UI_GLITCHER.currentImageFile != image){ + 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; diff --git a/v1-com-officielle/glitcher/index.html b/v1-com-officielle/glitcher/index.html index df9a2d5..a5ac87a 100644 --- a/v1-com-officielle/glitcher/index.html +++ b/v1-com-officielle/glitcher/index.html @@ -15,8 +15,12 @@ -
+ diff --git a/v1-com-officielle/glitcher/lib/glitcher.js b/v1-com-officielle/glitcher/lib/glitcher.js index fbfb691..9c83ea7 100644 --- a/v1-com-officielle/glitcher/lib/glitcher.js +++ b/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){ - 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 + async toBlob(type, quality) { + this.resize(this.currentImage.width, this.currentImage.height, true) + this.render() + let blob = await new Promise((res, rej) => this.canvas.toBlob((imageBlob) => { + if(imageBlob){ + res(imageBlob) + } else { + 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);