feat: add loading of test image

view/src/components/Toast/index.ts

@@ -48,5 +48,5 @@ export default {
   warn: msg => add({ type: "warn", msg }),
   error: msg => add({ type: "error", msg }),
   confirm: msg => add({ type: "confirm", msg, duration: 10000 }),
-  ask: (msg, options) => add({ type: "ask", msg, options, duration: 10000 })
+  ask: (msg, options?) => add({ type: "ask", msg, options, duration: 10000 })
 }

view/src/helpers/imageToFile.ts

@@ -0,0 +1,8 @@
+export default function dataURLtoFile(dataurl, filename) {
+  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], filename, { type: mime });
+}

view/src/helpers/index.ts

@@ -3,6 +3,7 @@ export { default as fileToImage } from "./FileToImage";
 export { default as countPixels } from "./CountPixels";
 export { default as downloadImage } from "./DownloadImage";
 export { default as imageToArray } from "./ImageToArray";
+export { default as imageToFile } from "./imageToFile";
 export { default as createFloodMap } from "./FloodFillMap";
 export { default as hexToRGB } from "./hexToRGB";
 export { default as rgbToHex } from "./rgbToHex";

view/src/routes/main.svelte

@@ -4,7 +4,8 @@
   import Cross from "../icons/Cross.svelte";
   import Toast from "../components/Toast";
   import { route as currentRoute, images, route } from "../stores";
-  import { fileToImage } from "../helpers";
+  import { bufToImageUrl, fileToImage } from "../helpers";
+  import { onMount } from "svelte";
   let acceptedFiles: File[] = [];
   let hovering = false;
 
@@ -71,6 +72,27 @@
     e.stopPropagation();
     acceptedFiles = [];
   }
+
+  onMount(() => {
+    const int = setTimeout(async () => {
+      if ($imageStore.length === 0) {
+        if (await Toast.confirm("Do you want to load a test picture?")) {
+          const res = await (await fetch("reinforced_concrete_02.jpg")).blob();
+
+          acceptedFiles = [
+            ...acceptedFiles,
+            new File([res], "reinforced_concrete_02.jpg"),
+          ];
+
+          Toast.info(
+            "This testimage is downloaded from <a href='https://hdrihaven.com/'>hdrihaven.com</a>"
+          );
+        }
+      }
+    }, 500);
+
+    return () => clearTimeout(int);
+  });
 </script>
 
 <div id="wrapper">