Spaces:
Running
Running
Fix the img slieshow bug
Browse files- 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 |
-
|
| 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(
|
| 137 |
drawNextImage = () => {
|
| 138 |
if (interval) {
|
| 139 |
clearInterval(interval);
|
| 140 |
}
|
| 141 |
imageTs = performance.now();
|
| 142 |
i = i + 1;
|
| 143 |
-
drawImage(
|
| 144 |
};
|
| 145 |
interval = setInterval(() => {
|
| 146 |
i = i + 1;
|
| 147 |
imageTs = performance.now();
|
| 148 |
-
drawImage(
|
| 149 |
}, 2500);
|
| 150 |
|
| 151 |
-
if (!isOutputControlAdded &&
|
| 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) {
|