From 0e65a05f551e6715ef3cba5472cefc63f966a474 Mon Sep 17 00:00:00 2001
From: itorr <itorrrrrr@me.com>
Date: Sat, 13 Aug 2022 12:04:39 +0800
Subject: [PATCH] img el

---
 html/document.js | 27 ++++++++++-----------------
 html/index.html  |  9 ++++++---
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/html/document.js b/html/document.js
index 687a14a..b4c394b 100644
--- a/html/document.js
+++ b/html/document.js
@@ -10,15 +10,7 @@ const readFileToURL = (file,onOver)=>{
 
 const readFileAndSetIMGSrc = file=>{
 	readFileToURL(file,src=>{
-		// const img = new Image();
-		const img = document.querySelector('img')
-		img.src = src;
-		img.onload = ()=>{
-			app.img = img;
-			louvre(img,app.style, src=>{
-				app.src = src;
-			});
-		}
+		app.src = src;
 	});
 };
 
@@ -39,7 +31,7 @@ document.addEventListener('paste',e=>{
 	if(clipboardData.files.length){
 		for(let i = 0;i<clipboardData.files.length;i++){
 			if(isImageRegex.test(clipboardData.files[i].type)){
-				console.log(clipboardData.files[i])
+				// console.log(clipboardData.files[i])
 				readFileAndSetIMGSrc(clipboardData.files[i]);
 			}
 		}
@@ -170,8 +162,12 @@ const style = {
 
 
 const convolutes = Object.keys(Convolutes);
+
+
+defaultImageURL = 'images/asuka-8.jpg';
 const data = {
-	img:null,
+	src: defaultImageURL,
+	defaultImageURL,
 	style,
 	runing: false,
 	convolutes,
@@ -197,10 +193,11 @@ chooseFile.input = document.createElement('input');
 chooseFile.input.type = 'file';
 chooseFile.form.appendChild(chooseFile.input);
 
+let app;
 louvreInit(_=>{
 
 
-	const app = new Vue({
+	app = new Vue({
 		el:'.app',
 		data,
 		methods: {
@@ -211,7 +208,7 @@ louvreInit(_=>{
 			async louvre(){
 				app.runing = true;
 				app.src = await louvre({
-					img: app.img,
+					img: app.$refs['img'],
 					outputCanvas: app.$refs['canvas'],
 					config: {
 						...app.style,
@@ -221,10 +218,6 @@ louvreInit(_=>{
 				app.runing = false;
 			},
 			async setImageAndDraw(e){
-				let img = e.target;
-	
-				console.log(img);
-				app.img = img;
 				await app.louvre();
 			},
 			chooseFile(){
diff --git a/html/index.html b/html/index.html
index e66d43f..dbe8fa5 100644
--- a/html/index.html
+++ b/html/index.html
@@ -25,12 +25,15 @@
 			@touchend.prevent="diff = false"
 			@mousedown.prevent="toDiff()"
 			@mouseup.prevent="diff = false">
-			<img src="images/asuka-8.jpg" @load="setImageAndDraw">
+			<img :src="src" ref="img" @load="setImageAndDraw">
 			<canvas ref="canvas"></canvas>
 		</div>
 		<div class="ctrl-box">
-			<button class="btn" @click="chooseFile()">选择图片</button>
-			<a class="btn current" 
+			<button class="btn"
+				:class="{current: src === defaultImageURL}"
+				@click="chooseFile()">选择图片</button>
+			<a class="btn" 
+				:class="{current: src !== defaultImageURL}"
 				@click="save()" 
 				:href="output"
 				:download="downloadFilename"