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) {
         | 

