diff --git a/html/document.js b/html/document.js index 61c8fe7..2639b05 100644 --- a/html/document.js +++ b/html/document.js @@ -174,7 +174,7 @@ const data = { src: defaultImageURL, defaultImageURL, style, - runing: false, + runing: true, convolutes, diff: false, output: '', @@ -197,72 +197,75 @@ chooseFile.input = document.createElement('input'); chooseFile.input.type = 'file'; chooseFile.form.appendChild(chooseFile.input); -let app; -louvreInit(_=>{ - - app = new Vue({ - el:'.app', - data, - methods: { - _louvre(){ - app.runing = true; - clearTimeout(app.T) - app.T = setTimeout(app.louvre,300) - }, - async louvre(){ - app.runing = true; - setTimeout(async _=>{ - await louvre({ - img: app.$refs['img'], - outputCanvas: app.$refs['canvas'], - config: { - ...app.style, - Convolutes, - } - }); - app.runing = false; - }) - }, - async setImageAndDraw(e){ - const { img } = app.$refs; - const { naturalWidth, naturalHeight } = img; - - const previewWidth = Math.min(maxPreviewWidth, naturalWidth); - const previewHeight = Math.floor(previewWidth / naturalWidth * naturalHeight); - - app.previewWidth = previewWidth; - app.previewHeight = previewHeight; - await app.louvre(); - }, - chooseFile(){ - chooseFile(readFileAndSetIMGSrc) - }, - save(){ - app.output = app.$refs['canvas'].toDataURL('image/jpeg',.9); - app.downloadFilename = `[lab.magiconch.com][One-Last-Image]-${+Date.now()}.jpg`; - }, - toDiff(){ - this.diff = true; - - document.activeElement = null; - } +app = new Vue({ + el:'.app', + data, + methods: { + _louvre(){ + app.runing = true; + clearTimeout(app.T) + app.T = setTimeout(app.louvre,300) }, - computed: { - sizeStyle(){ - return { - width: `${this.previewWidth}px`, - height: `${this.previewHeight}px`, - } - } + async louvre(){ + app.runing = true; + setTimeout(async _=>{ + await louvre({ + img: app.$refs['img'], + outputCanvas: app.$refs['canvas'], + config: { + ...app.style, + Convolutes, + } + }); + app.runing = false; + }) }, - watch:{ - style:{ - deep:true, - handler(){ - this._louvre(); - } + async setImageAndDraw(){ + const { img } = app.$refs; + const { naturalWidth, naturalHeight } = img; + + const previewWidth = Math.min(maxPreviewWidth, naturalWidth); + const previewHeight = Math.floor(previewWidth / naturalWidth * naturalHeight); + + app.previewWidth = previewWidth; + app.previewHeight = previewHeight; + await app.louvre(); + }, + chooseFile(){ + chooseFile(readFileAndSetIMGSrc) + }, + save(){ + app.output = app.$refs['canvas'].toDataURL('image/jpeg',.9); + app.downloadFilename = `[lab.magiconch.com][One-Last-Image]-${+Date.now()}.jpg`; + }, + toDiff(){ + this.diff = true; + + document.activeElement = null; + } + }, + computed: { + sizeStyle(){ + return { + width: `${this.previewWidth}px`, + height: `${this.previewHeight}px`, } } - }); + }, + watch:{ + style:{ + deep:true, + handler(){ + this._louvre(); + } + } + } +}); +louvreInit( _=>{ + const { img } = app.$refs; + img.onload = async _=>{ + await app.setImageAndDraw(); + }; + if(img.complete) img.onload(); }); \ No newline at end of file diff --git a/html/index.html b/html/index.html index 948ce01..05aef88 100644 --- a/html/index.html +++ b/html/index.html @@ -9,7 +9,7 @@ -
+

One Last Image @@ -20,6 +20,7 @@
+ :style="sizeStyle"> +
-
+ diff --git a/html/louvre.js b/html/louvre.js index c7e21b2..cd8b201 100644 --- a/html/louvre.js +++ b/html/louvre.js @@ -162,7 +162,7 @@ const louvre = async ({img, outputCanvas, config, callback}) => { canvasShade.width = _width; canvasShade.height = _height; - console.log({shadePixel}) + // console.log({shadePixel}) ctxShade.putImageData(shadePixel, 0, 0); @@ -233,7 +233,7 @@ const louvre = async ({img, outputCanvas, config, callback}) => { ctx ) : pixel; - console.log(/pixel2/,config.Convolutes[config.convoluteName2],pixel2); + // console.log(/pixel2/,config.Convolutes[config.convoluteName2],pixel2); // pixelData for (let i = 0; i < pixel2.data.length; i +=4) { let r = 128 + pixel2.data[i ] - pixel1.data[i ]; @@ -273,8 +273,8 @@ const louvre = async ({img, outputCanvas, config, callback}) => { const hStart = 30; const hEnd = -184; - const be = bezier(0.57, 0.01, 0.43, 0.99); - const s = config.s/100; + // const be = bezier(0.57, 0.01, 0.43, 0.99); + // const s = config.s/100; const gradient = ctx.createLinearGradient(0,0, _width,_height);