shade! 修改启动细节

2026-01-02 11:56:02 +08:00 · 2022-08-12 20:11:20 +08:00
parent 427f12ac07
commit cf9c6328f9
3 changed files with 117 additions and 104 deletions
--- a/html/document.js
+++ b/html/document.js
@@ -146,23 +146,23 @@ const Convolutes = {
 const style = {
 	zoom:1,
 	light:0,
-	blackLimit: 80,
-	blackLight: 40,
-	s:80,
-	l:50,
-	black:true,
-	kuma:true,
-	hajimei:false,
-	watermark: false,
+	shadeLimit: 80,
+	shadeLight: 40,
+	// s:80,
+	// l:50,
+	shade: true,
+	kuma: true,
+	hajimei: false,
+	watermark: true,
 	convoluteName: '一般',
 	convolute1Diff: true,
 	convoluteName2: null,
 	Convolutes,
-	contrast: 30,
-	invertLight: false,
-	hue:false,
-	hueGroup:255,
-	lightGroup:1,
+	// contrast: 30,
+	// invertLight: false,
+	// hue:false,
+	// hueGroup: 255,
+	// lightGroup: 1,
 	lightCut: 128,
 	darkCut: 120,

@@ -197,54 +197,56 @@ chooseFile.input = document.createElement('input');
 chooseFile.input.type = 'file';
 chooseFile.form.appendChild(chooseFile.input);

+louvreInit(_=>{


-const app = new Vue({
-	el:'.app',
-	data,
-	methods: {
-		_louvre(){
-			clearTimeout(app.T)
-			app.T = setTimeout(this.louvre,300)
+	const app = new Vue({
+		el:'.app',
+		data,
+		methods: {
+			_louvre(){
+				clearTimeout(app.T)
+				app.T = setTimeout(app.louvre,300)
+			},
+			async louvre(){
+				app.runing = true;
+				app.src = await louvre({
+					img: app.img,
+					outputCanvas: app.$refs['canvas'],
+					config: {
+						...app.style,
+						Convolutes,
+					}
+				});
+				app.runing = false;
+			},
+			async setImageAndDraw(e){
+				let img = e.target;
+	
+				console.log(img);
+				app.img = img;
+				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;
+			}
 		},
-		async louvre(){
-			app.runing = true;
-			app.src = await louvre({
-				img: this.img,
-				outputCanvas: this.$refs['canvas'],
-				config: {
-					...this.style,
-					Convolutes,
+		watch:{
+			style:{
+				deep:true,
+				handler(){
+					this._louvre();
 				}
-			});
-			app.runing = false;
-		},
-		async setImageAndDraw(e){
-			let img = e.target;
-
-			console.log(img);
-			this.img = img;
-			await this.louvre();
-		},
-		chooseFile(){
-			chooseFile(readFileAndSetIMGSrc)
-		},
-		save(){
-			this.output = this.$refs['canvas'].toDataURL('image/jpeg',.9);
-			this.downloadFilename = `[lab.magiconch.com][One-Last-Image]-${+Date.now()}.jpg`;
-		},
-		toDiff(){
-			this.diff = true;
-
-			document.activeElement = null;
-		}
-	},
-	watch:{
-		style:{
-			deep:true,
-			handler(){
-				this._louvre();
 			}
 		}
-	}
+	});
 });
--- a/html/index.html
+++ b/html/index.html
@@ -30,7 +30,11 @@
 		</div>
 		<div class="ctrl-box">
 			<button class="btn" @click="chooseFile()">选择图片</button>
-			<button class="btn current" @click="save()">下载图片</button>
+			<a class="btn current" 
+				@click="save()" 
+				:href="output"
+				:download="downloadFilename"
+				>下载图片</a>
 			<!-- <button @click="louvre()" class="generator-btn"></button> -->
 			<div class="config-box">
 				<!-- <div class="label-box">
@@ -62,13 +66,13 @@
 				<div style="padding:14px 0;">
 					<!-- <ui-switch v-model="style.cover">方形</ui-switch> -->
 					<ui-switch v-model="style.kuma">Kiss</ui-switch>
-					<ui-switch v-model="style.black" :disabled="!style.kuma">调子</ui-switch>
+					<ui-switch v-model="style.shade" :disabled="!style.kuma">调子</ui-switch>
 					<ui-switch v-model="style.watermark">水印</ui-switch>
 					<ui-switch v-model="style.hajimei" :disabled="!style.watermark">初回</ui-switch>
 				</div>
 				<!-- <div class="label-box">
 					<label>
-						<input type="checkbox" v-model="style.black">调子
+						<input type="checkbox" v-model="style.shade">调子
 					</label>
 					<label>
 						<input type="checkbox" v-model="style.cover">方形
@@ -125,17 +129,17 @@
 				<div class="label-box range-box">
 					<div class="head">
 						<b>调子数量</b>
-						<span v-text="style.blackLimit"></span>
+						<span v-text="style.shadeLimit"></span>
 					</div>
-					<input type="range" v-model.number="style.blackLimit"
+					<input type="range" v-model.number="style.shadeLimit"
 						min="20" max="140" step="1">
 				</div>
 				<div class="label-box range-box">
 					<div class="head">
 						<b>调子轻重</b>
-						<span v-text="style.blackLight"></span>
+						<span v-text="style.shadeLight"></span>
 					</div>
-					<input type="range" v-model.number="style.blackLight"
+					<input type="range" v-model.number="style.shadeLight"
 						min="10" max="70" step="1">
 				</div>
 				<!-- <div class="label-box">
@@ -165,14 +169,13 @@
 		</div>
 	</div>
 	<footer>
-		<base  target="_blank">
-		<a href="https://lab.magiconch.com/magi/">Magi</a>
-		<a href="https://lab.magiconch.com/eva-title/">标题生成器</a>
-		<a href="https://v.magiconch.com/mine-sweeper">扫雷</a>
+		<a href="https://lab.magiconch.com/magi/" target="_blank">Magi</a>
+		<a href="https://lab.magiconch.com/eva-title/" target="_blank">标题生成器</a>
+		<a href="https://v.magiconch.com/mine-sweeper" target="_blank">扫雷</a>
 		<br>
-		<a href="https://github.com/itorr/one-last-image">GitHub</a>
-		<a href="https://lab.magiconch.com">神奇海螺实验室</a>
-		<a href="https://weibo.com/reiove">@卜卜口</a>
+		<a href="https://github.com/itorr/one-last-image" target="_blank">GitHub</a>
+		<a href="https://lab.magiconch.com" target="_blank">神奇海螺实验室</a>
+		<a href="https://weibo.com/reiove" target="_blank">@卜卜口</a>
 	</footer>
 </div>

--- a/html/louvre.js
+++ b/html/louvre.js
@@ -21,8 +21,8 @@ let scale = width / height;
 let lastConfigString = null;

 const canvas = document.createElement('canvas');
-const canvasBlack = document.createElement('canvas');
-const canvasBlackMin = document.createElement('canvas');
+const canvasShade = document.createElement('canvas');
+const canvasShadeMin = document.createElement('canvas');
 const canvasMin = document.createElement('canvas');

 const louvre = async ({img, outputCanvas, config, callback}) => {
@@ -130,60 +130,60 @@ const louvre = async ({img, outputCanvas, config, callback}) => {
 		pixelData[i + 1] = y;
 		pixelData[i + 2] = y;
 	}
-	let blackPixel;
+	let shadePixel;

 	const { 
-		blackLimit = 80,
-		blackLight = 40 
+		shadeLimit = 80,
+		shadeLight = 40 
 	} = config;
-	if(config.black){
+	if(config.shade){
 		// 处理暗面
-		blackPixel = ctx.createImageData(_width, _height);
+		shadePixel = ctx.createImageData(_width, _height);

 		for (let i = 0; i < pixelData.length; i += 4) {
 			let y = pixelData[i];

-			y = y > blackLimit ? 0 : (blackLight + Math.random() * 40 - 20);
+			y = y > shadeLimit ? 0 : (shadeLight + Math.random() * 40 - 20);

 			// y = Math.max(255-y) * 0.6;

-			blackPixel.data[i    ] = y;
-			blackPixel.data[i + 1] = 128;
-			blackPixel.data[i + 2] = 128;
-			blackPixel.data[i + 3] = Math.floor(Math.random() * 255)//Math.ceil( y + Math.random() * 40 - 20);
+			shadePixel.data[i    ] = y;
+			shadePixel.data[i + 1] = 128;
+			shadePixel.data[i + 2] = 128;
+			shadePixel.data[i + 3] = Math.floor(Math.random() * 255)//Math.ceil( y + Math.random() * 40 - 20);
 		}

 		// /*
-		// document.body.appendChild(canvasBlack)
+		// document.body.appendChild(canvasShade)

-		const ctxBlack = canvasBlack.getContext('2d');
-		const ctxBlackMin = canvasBlackMin.getContext('2d');
+		const ctxShade = canvasShade.getContext('2d');
+		const ctxShadeMin = canvasShadeMin.getContext('2d');
 		
-		canvasBlack.width = _width;
-		canvasBlack.height = _height;
+		canvasShade.width = _width;
+		canvasShade.height = _height;

-		console.log({blackPixel})
+		console.log({shadePixel})

-		ctxBlack.putImageData(blackPixel, 0, 0);
+		ctxShade.putImageData(shadePixel, 0, 0);

-		// ctxBlack.fillText('123233',50,50);
-		const blackZoom = 4;
-		canvasBlackMin.width = Math.floor(_width/blackZoom);
-		canvasBlackMin.height = Math.floor(_height/blackZoom);
+		// ctxShade.fillText('123233',50,50);
+		const shadeZoom = 4;
+		canvasShadeMin.width = Math.floor(_width/shadeZoom);
+		canvasShadeMin.height = Math.floor(_height/shadeZoom);

-		ctxBlackMin.drawImage(
-			canvasBlack,
+		ctxShadeMin.drawImage(
+			canvasShade,
 			0,0,
-			canvasBlackMin.width,canvasBlackMin.height
+			canvasShadeMin.width,canvasShadeMin.height
 		);

-		ctxBlack.clearRect(0,0,_width,_height)
-		ctxBlack.drawImage(
-			canvasBlackMin,
+		ctxShade.clearRect(0,0,_width,_height)
+		ctxShade.drawImage(
+			canvasShadeMin,
 			0,0,
 			_width,_height
 		);
-		blackPixel = ctxBlack.getImageData(0,0,_width,_height);
+		shadePixel = ctxShade.getImageData(0,0,_width,_height);

 	}
 	
@@ -332,10 +332,10 @@ const louvre = async ({img, outputCanvas, config, callback}) => {
 			pixelData[i+2 ] = gradientPixel.data[i + 2];
 			
 			y = 255 - y;
-			if(config.black){
+			if(config.shade){
 				y = Math.max(
 					y,
-					blackPixel.data[i]
+					shadePixel.data[i]
 				);
 			}
 			pixelData[i+3 ] = y
@@ -444,7 +444,15 @@ let loadImagePromise = async url=>{
 }

 let watermarkImageEl;
-loadImage('one-last-image-logo2.png',el=>watermarkImageEl = el);
+
+const louvreInit = onOver=>{
+	loadImage('one-last-image-logo2.png',el=>{
+		watermarkImageEl = el;
+		onOver();
+	});
+}
+
+
 let convolute = (pixels, weights, ctx) => {
 	const side = Math.round(Math.sqrt(weights.length));
 	const halfSide = Math.floor(side / 2);