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

优化加载过程

Browse Source
This commit is contained in:
itorr
2022-08-14 14:56:04 +08:00
parent d77e7e3530
commit d9eeb1e387
3 changed files with 90 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
html/document.js
View File

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

25
html/index.html
View File

@@ -9,7 +9,7 @@
</head>
<body>
<div class="app" :data-runing="runing" v-clock >
<div class="app" :data-runing="runing">
<header>
<h1>
One Last Image
@@ -20,6 +20,7 @@
<div>
<div class="output-box"
:data-cover="style.cover"
data-runing="true"
:data-diff="diff"
:data-runing="runing"
@touchstart.prevent="toDiff()"
@@ -27,12 +28,24 @@
@mousedown.prevent="toDiff()"
@mouseup.prevent="diff = false">
<img ref="img"
src="images/asuka-8.jpg"
:src="src"
:style="sizeStyle"
@load="setImageAndDraw">
:style="sizeStyle">
<canvas ref="canvas"
style="width: 800px; height: 474px;"
:style="sizeStyle"></canvas>
<script>
(_=>{
const maxPreviewWidth = Math.min(800,document.body.offsetWidth);
let previewWidth = maxPreviewWidth;
let previewHeight = Math.floor(previewWidth * 0.59);
[
...document.querySelectorAll('img,canvas')
].forEach(el=>{
el.style.cssText = `width:${previewWidth}px;height:${previewHeight}px`;
})
})();
</script>
</div>
<div class="ctrl-box">
<button class="btn"
@@ -144,14 +157,14 @@
<input type="range" v-model.number="style.shadeLimit"
min="20" max="140" step="1">
</div>
<div class="label-box range-box">
<!-- <div class="label-box range-box">
<div class="head">
<b>调子轻重</b>
<span v-text="style.shadeLight"></span>
</div>
<input type="range" v-model.number="style.shadeLight"
min="10" max="70" step="1">
</div>
</div> -->
<!-- <div class="label-box">
<label>
<input type="checkbox" v-model="style.hue">色轮
@@ -191,7 +204,7 @@
<script src="https://lab.magiconch.com/vue.2.6.11.min.js"></script>
<script src="color.js"></script>
<script src="bezier-easing.js"></script>
<!-- <script src="bezier-easing.js"></script> -->
<script src="louvre.js"></script>
<script src="ui-tabs.vue.js"></script>
<script src="ui-switch.vue.js"></script>

8
html/louvre.js
View File

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