Add original image in slideshow
Browse files- README.md +1 -1
- src/routes/+page.svelte +10 -5
README.md
CHANGED
@@ -15,4 +15,4 @@ To develop locally:
|
|
15 |
```
|
16 |
npm ci
|
17 |
NODE_ENV="development" npm run dev -- --open
|
18 |
-
```
|
|
|
15 |
```
|
16 |
npm ci
|
17 |
NODE_ENV="development" npm run dev -- --open
|
18 |
+
```
|
src/routes/+page.svelte
CHANGED
@@ -56,12 +56,16 @@
|
|
56 |
}
|
57 |
}
|
58 |
|
59 |
-
async function getCanvasSnapshot(
|
|
|
|
|
60 |
const canvasDataUrl = canvas.toDataURL('png');
|
61 |
const res = await fetch(canvasDataUrl);
|
62 |
const blob = await res.blob();
|
63 |
const imgFile = new File([blob], 'canvas shot.png', { type: 'image/png' });
|
64 |
-
|
|
|
|
|
65 |
}
|
66 |
|
67 |
async function submitRequest() {
|
@@ -79,7 +83,7 @@
|
|
79 |
noiseTs = performance.now();
|
80 |
drawNoise();
|
81 |
|
82 |
-
const imgFile = await getCanvasSnapshot(canvas);
|
83 |
const form = new FormData();
|
84 |
form.append('prompt', txt);
|
85 |
form.append('image', imgFile);
|
@@ -94,7 +98,7 @@
|
|
94 |
|
95 |
const { images: imagesBase64Strs }: { images: string[] } = json;
|
96 |
|
97 |
-
const imgEls = await Promise.all(
|
98 |
imagesBase64Strs.map(async (imgBase64Str) => {
|
99 |
const imgEl = new Image();
|
100 |
imgEl.src = `data:image/png;base64, ${imgBase64Str}`;
|
@@ -104,7 +108,8 @@
|
|
104 |
});
|
105 |
return imgEl;
|
106 |
})
|
107 |
-
);
|
|
|
108 |
|
109 |
isLoading = false;
|
110 |
|
|
|
56 |
}
|
57 |
}
|
58 |
|
59 |
+
async function getCanvasSnapshot(
|
60 |
+
canvas: HTMLCanvasElement
|
61 |
+
): Promise<{ imgFile: File; imgBitmap: ImageBitmap }> {
|
62 |
const canvasDataUrl = canvas.toDataURL('png');
|
63 |
const res = await fetch(canvasDataUrl);
|
64 |
const blob = await res.blob();
|
65 |
const imgFile = new File([blob], 'canvas shot.png', { type: 'image/png' });
|
66 |
+
const imgData = canvas.getContext('2d')!.getImageData(0, 0, canvasSize, canvasSize);
|
67 |
+
const imgBitmap = await createImageBitmap(imgData);
|
68 |
+
return { imgFile, imgBitmap };
|
69 |
}
|
70 |
|
71 |
async function submitRequest() {
|
|
|
83 |
noiseTs = performance.now();
|
84 |
drawNoise();
|
85 |
|
86 |
+
const { imgFile, imgBitmap } = await getCanvasSnapshot(canvas);
|
87 |
const form = new FormData();
|
88 |
form.append('prompt', txt);
|
89 |
form.append('image', imgFile);
|
|
|
98 |
|
99 |
const { images: imagesBase64Strs }: { images: string[] } = json;
|
100 |
|
101 |
+
const imgEls = (await Promise.all(
|
102 |
imagesBase64Strs.map(async (imgBase64Str) => {
|
103 |
const imgEl = new Image();
|
104 |
imgEl.src = `data:image/png;base64, ${imgBase64Str}`;
|
|
|
108 |
});
|
109 |
return imgEl;
|
110 |
})
|
111 |
+
)) as CanvasImageSource[];
|
112 |
+
imgEls.push(imgBitmap); // add the original sketch
|
113 |
|
114 |
isLoading = false;
|
115 |
|