add pngChunks function, remove dependency

package.json

@@ -35,7 +35,6 @@
     "monaco-editor": "0.46.0",
     "monaco-editor-webpack-plugin": "7.1.0",
     "pdfobject": "2.2.12",
-    "png-chunks-extract": "1.0.0",
     "pretty-ms": "9.0.0",
     "sortablejs": "1.15.2",
     "swagger-ui-dist": "5.11.3",

web_src/js/features/comp/ImagePaste.js

@@ -121,7 +121,6 @@ const uploadClipboardImage = async (editor, dropzone, e) => {
     } else {
       text = `![${name}](${url})`;
     }
-
     editor.replacePlaceholder(placeholder, text);
 
     const $input = $(`<input name="files" type="hidden">`).attr('id', uuid).val(uuid);

web_src/js/utils/image.js

@@ -1,4 +1,21 @@
-import pngChunksExtract from 'png-chunks-extract';
+export function pngChunks(data) {
+  const view = new DataView(data.buffer, 0);
+  if (view.getBigUint64(0) !== 9894494448401390090n) throw new Error(`Invalid png header`);
+
+  const decoder = new TextDecoder();
+  const chunks = [];
+  let index = 8;
+  while (index < data.length) {
+    const len = view.getUint32(index);
+    chunks.push({
+      name: decoder.decode(data.slice(index + 4, index + 8)),
+      data: data.slice(index + 8, index + 8 + len),
+    });
+    index += len + 12;
+  }
+
+  return chunks;
+}
 
 export async function pngInfo(blob) {
   let width = 0;
@@ -8,14 +25,13 @@ export async function pngInfo(blob) {
   if (blob.type !== 'image/png') return {width, dppx};
 
   try {
-    const buffer = await blob.arrayBuffer();
-    const chunks = pngChunksExtract(new Uint8Array(buffer));
+    const chunks = pngChunks(new Uint8Array(await blob.arrayBuffer()));
 
     // extract width from mandatory IHDR chunk
     const ihdr = chunks.find((chunk) => chunk.name === 'IHDR');
     if (ihdr?.data?.length) {
-      const View = new DataView(ihdr.data.buffer, 0);
-      width = View.getUint32(0);
+      const view = new DataView(ihdr.data.buffer, 0);
+      width = view.getUint32(0);
     }
 
     // extract dppx from optional pHYs chunk, assuming pixels are square

web_src/js/utils/image.test.js

@@ -0,0 +1,10 @@
+import {pngChunks} from './image.js';
+
+test('pngChunks', async () => {
+  const blob = await (await globalThis.fetch('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAADUlEQVQIHQECAP3/AAAAAgABzePRKwAAAABJRU5ErkJggg==')).blob();
+  expect(pngChunks(new Uint8Array(await blob.arrayBuffer()))).toEqual([
+    {name: "IHDR", data: new Uint8Array([0, 0, 0, 1, 0, 0, 0, 1, 8, 0, 0, 0, 0])},
+    {name: "IDAT", data: new Uint8Array([8, 29, 1, 2, 0, 253, 255, 0, 0, 0, 2, 0, 1])},
+    {name: "IEND", data: new Uint8Array([])},
+  ]);
+});