mishig HF staff commited on
Commit
a303e78
1 Parent(s): f55b820

Fix the img slieshow bug

Browse files
Files changed (1) hide show
  1. src/routes/+page.svelte +9 -8
src/routes/+page.svelte CHANGED
@@ -11,14 +11,15 @@
11
  let imageTs: DOMHighResTimeStamp;
12
  let drawNextImage: () => void;
13
  let interval: ReturnType<typeof setInterval>;
14
-
15
- const animImageDuration = 500 as const;
16
- const animNoiseDuration = 3000 as const;
17
  let canvasSize = 400;
18
  let canvasContainerEl: HTMLDivElement;
19
  let fileInput: HTMLInputElement;
20
  let sketchEl: HTMLCanvasElement;
21
  let isShowSketch = false;
 
 
 
 
22
 
23
  async function drawNoise() {
24
  if (!ctx) {
@@ -112,7 +113,7 @@
112
  );
113
  }
114
 
115
- const imgEls = (await Promise.all(
116
  imagesBase64Strs.map(async (imgBase64Str) => {
117
  const imgEl = new Image();
118
  imgEl.src = `data:image/png;base64, ${imgBase64Str}`;
@@ -133,22 +134,22 @@
133
  isShowSketch = true;
134
  let i = 0;
135
  imageTs = performance.now();
136
- drawImage(imgEls[i % imgEls.length]);
137
  drawNextImage = () => {
138
  if (interval) {
139
  clearInterval(interval);
140
  }
141
  imageTs = performance.now();
142
  i = i + 1;
143
- drawImage(imgEls[i % imgEls.length]);
144
  };
145
  interval = setInterval(() => {
146
  i = i + 1;
147
  imageTs = performance.now();
148
- drawImage(imgEls[i % imgEls.length]);
149
  }, 2500);
150
 
151
- if (!isOutputControlAdded && imgEls.length > 1) {
152
  addOutputControl();
153
  }
154
  } catch (err) {
 
11
  let imageTs: DOMHighResTimeStamp;
12
  let drawNextImage: () => void;
13
  let interval: ReturnType<typeof setInterval>;
 
 
 
14
  let canvasSize = 400;
15
  let canvasContainerEl: HTMLDivElement;
16
  let fileInput: HTMLInputElement;
17
  let sketchEl: HTMLCanvasElement;
18
  let isShowSketch = false;
19
+ let outputImgs: CanvasImageSource[] = [];
20
+
21
+ const animImageDuration = 500 as const;
22
+ const animNoiseDuration = 3000 as const;
23
 
24
  async function drawNoise() {
25
  if (!ctx) {
 
113
  );
114
  }
115
 
116
+ outputImgs = (await Promise.all(
117
  imagesBase64Strs.map(async (imgBase64Str) => {
118
  const imgEl = new Image();
119
  imgEl.src = `data:image/png;base64, ${imgBase64Str}`;
 
134
  isShowSketch = true;
135
  let i = 0;
136
  imageTs = performance.now();
137
+ drawImage(outputImgs[i % outputImgs.length]);
138
  drawNextImage = () => {
139
  if (interval) {
140
  clearInterval(interval);
141
  }
142
  imageTs = performance.now();
143
  i = i + 1;
144
+ drawImage(outputImgs[i % outputImgs.length]);
145
  };
146
  interval = setInterval(() => {
147
  i = i + 1;
148
  imageTs = performance.now();
149
+ drawImage(outputImgs[i % outputImgs.length]);
150
  }, 2500);
151
 
152
+ if (!isOutputControlAdded && outputImgs.length > 1) {
153
  addOutputControl();
154
  }
155
  } catch (err) {