Mirrors/one-last-image
1
0
Fork 0
mirror of https://github.com/itorr/one-last-image.git synced 2026-01-02 20:06:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

Preview size; v-clock

Browse Source
This commit is contained in:
itorr
2022-08-14 14:37:44 +08:00
parent 362f24ee18
commit d77e7e3530
4 changed files with 69 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
html/document.js
View File

@@ -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,

20
html/document.less
View File

@@ -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;
}
}

13
html/index.html
View File

@@ -9,7 +9,7 @@
</head>
<body>
<div class="app" :data-runing="runing">
<div class="app" :data-runing="runing" v-clock >
<header>
<h1>
One Last Image
@@ -21,12 +21,18 @@
<div class="output-box"
:data-cover="style.cover"
:data-diff="diff"
:data-runing="runing"
@touchstart.prevent="toDiff()"
@touchend.prevent="diff = false"
@mousedown.prevent="toDiff()"
@mouseup.prevent="diff = false">
<img :src="src" ref="img" @load="setImageAndDraw">
<canvas ref="canvas"></canvas>
<img ref="img"
:src="src"
:style="sizeStyle"
@load="setImageAndDraw">
<canvas ref="canvas"
style="width: 800px; height: 474px;"
:style="sizeStyle"></canvas>
</div>
<div class="ctrl-box">
<button class="btn"
@@ -36,6 +42,7 @@
:class="{current: src !== defaultImageURL}"
@click="save()"
:href="output"
:disabled="runing"
:download="downloadFilename"
>下载图片</a>
<!-- <button @click="louvre()" class="generator-btn"></button> -->

6
html/louvre.js
View File

@@ -280,9 +280,9 @@ const louvre = async ({img, outputCanvas, config, callback}) => {
const gradient = ctx.createLinearGradient(0,0, _width,_height);
gradient.addColorStop(0, '#fbba30');
gradient.addColorStop(0.4, '#fc7235');
gradient.addColorStop(.6, '#fc354e');
gradient.addColorStop(0.7, '#cf36df');
gradient.addColorStop(0.3, '#fc7235');
gradient.addColorStop(.5, '#fc354e');
gradient.addColorStop(.65, '#cf36df');
gradient.addColorStop(.8, '#37b5d9');
gradient.addColorStop(1, '#3eb6da');