JPG to PNG conversion

src/EyeButton.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
-import { fileTypeFromBuffer } from 'file-type';
-import type Embedding from './Embedding.svelte';
-import type Embeddings from './Embeddings.svelte';
+  import { fileTypeFromBuffer } from 'file-type'
+  import { Buffer } from 'buffer'
+  import type Embedding from './Embedding.svelte'
+  import type Embeddings from './Embeddings.svelte'
 
-import type { EmbeddedFile } from './main';
+  import type { EmbeddedFile } from './main'
 
   import { settings } from './stores'
 
   export let id = ''
-  export let files: EmbeddedFile[];
-  export let inst: Embedding | Embeddings;
+  export let files: EmbeddedFile[]
+  export let inst: Embedding | Embeddings
 
   let isVideo = false
 
-  inst.$on("fileinfo", (info) => {
-    isVideo = isVideo || info.detail.type.mime.startsWith('video/');
+  inst.$on('fileinfo', (info) => {
+    isVideo = isVideo || info.detail.type.mime.startsWith('video/')
   })
 
   let visible = false
@@ -22,19 +23,23 @@ import type { EmbeddedFile } from './main';
     visible = !visible
     document.dispatchEvent(new CustomEvent('reveal', { detail: { id } }))
   }
-  const isNotChrome = !navigator.userAgent.includes("Chrome/");
+  const isNotChrome = !navigator.userAgent.includes('Chrome/')
 
   async function downloadFile(file: EmbeddedFile) {
-    const a = document.createElement("a") as HTMLAnchorElement;
-    document.body.appendChild(a);
-    a.style.display = 'none';
-    const thumb = Buffer.isBuffer(file.data) ? file.data : await file.data();
-    const type = await fileTypeFromBuffer(thumb);
-    const url = URL.createObjectURL(new Blob([thumb], { type: type?.mime }))
-    a.href = url;
-    a.download = file.filename;
-    a.click();
-    window.URL.revokeObjectURL(url);
+    const a = document.createElement('a') as HTMLAnchorElement
+    document.body.appendChild(a)
+    a.style.display = 'none'
+    let url: string
+    if (typeof file.data != "string") {
+      const thumb = (Buffer.isBuffer(file.data) ? file.data : await file.data())
+      const type = await fileTypeFromBuffer(thumb)
+      url = URL.createObjectURL(new Blob([thumb], { type: type?.mime }))
+    } else
+      url = file.data;
+    a.href = url
+    a.download = file.filename
+    a.click()
+    window.URL.revokeObjectURL(url)
   }
 </script>
 
@@ -47,36 +52,31 @@ import type { EmbeddedFile } from './main';
   />
 {/if}
 {#each files as file}
-<span
-  title={file.filename}
-  on:click={() => downloadFile(file)}
-  class="fa fa-download clickable"
-/>
-{#if file.source}
-<!-- svelte-ignore a11y-missing-content -->
-<a
-  href={file.source}
-  target="_blank"
-  class="clickable"
->Source</a>
-{/if}
-{#if file.page}
-<!-- svelte-ignore a11y-missing-content -->
-<a
-  href={file.page.url}
-  target="_blank"
-  class="clickable"
->{file.page.title}</a>
-{/if}
-{#if isNotChrome && isVideo}
-  <!-- svelte-ignore a11y-missing-attribute -->
-  <a on:click={(ev) => {
-    inst.bepis(ev);
-  }} alt="By clicking this you agree to stay hydrated"
-  class="clickable"
-    >[PEE contract]</a
-  >
-{/if}
+  <span
+    title={file.filename}
+    on:click={() => downloadFile(file)}
+    class="fa fa-download clickable"
+  />
+  {#if file.source}
+    <!-- svelte-ignore a11y-missing-content -->
+    <a href={file.source} target="_blank" class="clickable">Source</a>
+  {/if}
+  {#if file.page}
+    <!-- svelte-ignore a11y-missing-content -->
+    <a href={file.page.url} target="_blank" class="clickable"
+      >{file.page.title}</a
+    >
+  {/if}
+  {#if isNotChrome && isVideo}
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <a
+      on:click={(ev) => {
+        inst.bepis(ev)
+      }}
+      alt="By clicking this you agree to stay hydrated"
+      class="clickable">[PEE contract]</a
+    >
+  {/if}
 {/each}
 
 <style scoped>

src/jpg.ts

@@ -0,0 +1,59 @@
+import { Buffer } from "buffer";
+import type { ImageProcessor } from "./main";
+import pngv3 from "./pngv3";
+import { fireNotification } from "./utils";
+
+const convertToPng = async (f: File): Promise<Blob | undefined> => {
+    const can = document.createElement("canvas");
+
+    const url = URL.createObjectURL(f);
+    try {
+        let dims: [number, number];
+        let source: CanvasImageSource;
+        if (f.type.startsWith("image")) {
+            const imgElem = document.createElement('img');
+            imgElem.src = url;
+            await new Promise(_ => imgElem.onload = _);
+            dims = [imgElem.naturalWidth, imgElem.naturalHeight];
+            source = imgElem;
+        } else if (f.type.startsWith("video")) {
+            const vidElem = document.createElement('video');
+            vidElem.src = url;
+            await new Promise(_ => vidElem.onloadedmetadata = _);
+            vidElem.currentTime = 0;
+            await new Promise(_ => vidElem.onloadeddata = _);
+            dims = [vidElem.videoWidth, vidElem.videoHeight];
+            source = vidElem;
+        } else
+            return;
+        can.width = dims[0];
+        can.height = dims[1];
+        const ctx = can.getContext("2d");
+        if (!ctx)
+            return;
+        ctx.drawImage(source, 0, 0, dims[0], dims[1]);
+
+        const blob = await new Promise<Blob | null>(_ => can.toBlob(_, "image/png"));
+        if (!blob)
+            return;
+        return blob;
+    } finally {
+        URL.revokeObjectURL(url);
+    }
+};
+
+const inject = async (b: File, c: File[]) => {
+    const pngfile = await convertToPng(b);
+    if (!pngfile || pngfile.size > 3000 * 1024) {
+        throw "Couldn't convert file to PNG: resulting filesize too big.";
+    }
+    return pngv3.inject!(b, c);
+};
+
+export default {
+    skip: true,
+    match: fn => !!fn.match(/\.jpe?g$/),
+    has_embed: () => false,
+    extract: () => [],
+    inject
+} as ImageProcessor;

src/main.ts

@@ -98,6 +98,7 @@ const processImage = async (src: string, fn: string, hex: string): Promise<([Emb
                 return [await proc.extract(md5, fn), true] as [EmbeddedFile[], boolean];
             return;
         }
+        // TODO: Move this outside the loop?
         const iter = streamRemote(src);
         if (!iter)
             return;