diff --git a/html/document.js b/html/document.js index f5b25ce..61c8fe7 100644 --- a/html/document.js +++ b/html/document.js @@ -157,14 +157,19 @@ const style = { // lightGroup: 1, lightCut: 128, darkCut: 120, - }; const convolutes = Object.keys(Convolutes); -defaultImageURL = 'images/asuka-8.jpg'; +const defaultImageURL = 'images/asuka-8.jpg'; + + +const maxPreviewWidth = Math.min(800,document.body.offsetWidth); +let previewWidth = maxPreviewWidth; +let previewHeight = Math.round(previewWidth * 0.59); + const data = { src: defaultImageURL, defaultImageURL, @@ -173,13 +178,12 @@ const data = { convolutes, diff: false, output: '', - downloadFilename: '[One-Last-Image].jpg' + downloadFilename: '[One-Last-Image].jpg', + previewWidth, + previewHeight }; - - - const chooseFile = callback=>{ chooseFile.form.reset(); chooseFile.input.onchange = function(){ @@ -202,22 +206,33 @@ louvreInit(_=>{ data, methods: { _louvre(){ + app.runing = true; clearTimeout(app.T) app.T = setTimeout(app.louvre,300) }, async louvre(){ app.runing = true; - await louvre({ - img: app.$refs['img'], - outputCanvas: app.$refs['canvas'], - config: { - ...app.style, - Convolutes, - } - }); - app.runing = false; + 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(){ @@ -233,6 +248,14 @@ louvreInit(_=>{ document.activeElement = null; } }, + computed: { + sizeStyle(){ + return { + width: `${this.previewWidth}px`, + height: `${this.previewHeight}px`, + } + } + }, watch:{ style:{ deep:true, diff --git a/html/document.less b/html/document.less index bd9eb2c..2bffd2a 100644 --- a/html/document.less +++ b/html/document.less @@ -55,11 +55,17 @@ h1{ } canvas{ - background:#FFF; + // background:#FFF; } .app{ max-width:800px; margin:0 auto; + // &[data-runing="true"]{ + // background: red; + // } +} +[v-clock]{ + visibility: hidden; } .output-box{ position: relative; @@ -78,13 +84,18 @@ canvas{ transition: opacity .1s ease; } canvas{ - + } &[data-diff]{ img{ opacity: 1; } } + &[data-runing]{ + img{ + opacity: 1; + } + } --cover-width: 480px; &[data-cover="true"]{ width:var(--cover-width); @@ -251,8 +262,13 @@ footer{ border-radius: 3px; background:#666; color:#DDD; + transition: background-color .3s ease,color .3s ease; &.current{ background: #000; color:#EEE; } + &[disabled]{ + background:#999; + pointer-events: none; + } } \ No newline at end of file diff --git a/html/index.html b/html/index.html index dbe8fa5..948ce01 100644 --- a/html/index.html +++ b/html/index.html @@ -9,7 +9,7 @@ -
+

One Last Image @@ -21,12 +21,18 @@
- - + +