Use WASM version of pdfium instead of pdf.js

[espresso3389]

Sometimes we encounter some issues that is caused by the difference between pdfium and pdf.js. It's better if we can introduce WASM version of pdfium.

But the approach to use wasm_ffi to interop with WASM pdfium is still not realistic because it could not reuse the existing pdfium's ffi bindings.

Another approach is to introduce "manually written wrapper" for WASM pdfium though it takes so much cost/time for me...

The big help with recent AI, it gets more realistic. It "manually" writes these wrapper JS codes in several minutes.

https://chatgpt.com/share/67a47513-ded8-800e-a9bd-d7f4dd439b4b

The following codes are not tested but very promising:

// pdfium_worker.js

// Import the Emscripten-generated glue code that loads the pdfium WASM module.
// (Make sure the WASM build is configured for use in a Worker.)
importScripts('pdfium_wasm.js');

// The PDFiumWorker object encapsulates our pdfium bindings and function implementations.
var PDFiumWorker = {
  // Function pointers will be set after runtime initialization.
  _initLibraryFn: null,
  _destroyLibraryFn: null,
  _loadDocumentFn: null,
  _closeDocumentFn: null,
  _loadPageFn: null,
  _closePageFn: null,
  _renderPageFn: null,

  // Bind all required pdfium functions using Module.cwrap.
  initBindings: function () {
    this._initLibraryFn = Module.cwrap("FPDF_InitLibrary", null, []);
    this._destroyLibraryFn = Module.cwrap("FPDF_DestroyLibrary", null, []);
    this._loadDocumentFn = Module.cwrap("FPDF_LoadDocument", "number", [
      "string",
      "string",
    ]);
    this._closeDocumentFn = Module.cwrap("FPDF_CloseDocument", null, [
      "number",
    ]);
    this._loadPageFn = Module.cwrap("FPDF_LoadPage", "number", [
      "number",
      "number",
    ]);
    this._closePageFn = Module.cwrap("FPDF_ClosePage", null, ["number"]);
    // Adjust the render function signature as needed.
    this._renderPageFn = Module.cwrap("FPDF_RenderPage", null, [
      "number", // page handle
      "number", // pointer to image buffer
      "number", // start_x
      "number", // start_y
      "number", // width
      "number", // height
      "number", // rotation flag
      "number", // render flags
    ]);
  },

  // Implementations for each pdfium function command.
  functions: {
    initLibrary: function () {
      PDFiumWorker._initLibraryFn();
      return { message: "Library initialized" };
    },

    destroyLibrary: function () {
      PDFiumWorker._destroyLibraryFn();
      return { message: "Library destroyed" };
    },

    loadDocument: function (params) {
      // params: { filePath: string, password: string (optional) }
      var docHandle = PDFiumWorker._loadDocumentFn(
        params.filePath,
        params.password || ""
      );
      if (!docHandle) {
        throw new Error("Failed to load document: " + params.filePath);
      }
      return { docHandle: docHandle };
    },

    closeDocument: function (params) {
      // params: { docHandle: number }
      PDFiumWorker._closeDocumentFn(params.docHandle);
      return { message: "Document closed" };
    },

    loadPage: function (params) {
      // params: { docHandle: number, pageIndex: number }
      var pageHandle = PDFiumWorker._loadPageFn(
        params.docHandle,
        params.pageIndex
      );
      if (!pageHandle) {
        throw new Error(
          "Failed to load page " + params.pageIndex + " from document " + params.docHandle
        );
      }
      return { pageHandle: pageHandle };
    },

    closePage: function (params) {
      // params: { pageHandle: number }
      PDFiumWorker._closePageFn(params.pageHandle);
      return { message: "Page closed" };
    },

    renderPage: function (params) {
      // params: {
      //   pageHandle: number,
      //   startX: number (default 0),
      //   startY: number (default 0),
      //   width: number (default 800),
      //   height: number (default 600),
      //   rotate: number (default 0),
      //   flags: number (default 0)
      // }
      var startX = params.startX || 0;
      var startY = params.startY || 0;
      var width = params.width || 800;
      var height = params.height || 600;
      var rotate = params.rotate || 0;
      var flags = params.flags || 0;
      var bufferSize = width * height * 4; // RGBA: 4 bytes per pixel
      var bufferPtr = Module._malloc(bufferSize);
      if (!bufferPtr) {
        throw new Error("Failed to allocate memory for rendering");
      }
      PDFiumWorker._renderPageFn(
        params.pageHandle,
        bufferPtr,
        startX,
        startY,
        width,
        height,
        rotate,
        flags
      );
      // Copy rendered data from WASM heap.
      var heapBytes = new Uint8ClampedArray(Module.HEAPU8.buffer, bufferPtr, bufferSize);
      // Create a new ArrayBuffer with the pixel data (transferable).
      var imageBuffer = new Uint8ClampedArray(heapBytes);
      Module._free(bufferPtr);
      return { imageData: imageBuffer.buffer, width: width, height: height };
    },
  },

  // A helper to process incoming commands.
  handleRequest: function (data) {
    // Expected message format: { id: <unique_id>, command: <string>, parameters: <object> }
    var id = data.id;
    var command = data.command;
    var params = data.parameters || {};
    try {
      if (!PDFiumWorker.functions[command]) {
        throw new Error("Unknown command: " + command);
      }
      var result = PDFiumWorker.functions[command](params);
      // Send a success response with the same id.
      postMessage({ id: id, status: "success", result: result });
    } catch (err) {
      postMessage({ id: id, status: "error", error: err.toString() });
    }
  },
};

// When the WASM Module is ready, bind the functions and initialize the library.
Module.onRuntimeInitialized = function () {
  PDFiumWorker.initBindings();
  // Optionally, initialize the library automatically.
  PDFiumWorker.functions.initLibrary();
  // Inform the main thread that the worker is ready.
  postMessage({ type: "ready" });
};

// Listen for all incoming messages.
onmessage = function (e) {
  var data = e.data;
  // Expecting messages that contain at least an "id" and a "command".
  if (data && data.id && data.command) {
    PDFiumWorker.handleRequest(data);
  } else {
    console.error("Received improperly formatted message:", data);
  }
};

// pdfium_client.js

class PDFiumWorkerClient {
  constructor(workerScriptURL) {
    this.worker = new Worker(workerScriptURL);
    this.requestId = 0;
    this.callbacks = new Map();

    // Listen for messages from the worker.
    this.worker.onmessage = (event) => {
      const data = event.data;
      if (data.type === "ready") {
        console.log("PDFium worker is ready");
        return;
      }
      // For command responses, match using the request id.
      if (data.id) {
        const callback = this.callbacks.get(data.id);
        if (callback) {
          if (data.status === "success") {
            callback.resolve(data.result);
          } else {
            callback.reject(new Error(data.error));
          }
          this.callbacks.delete(data.id);
        }
      }
    };

    this.worker.onerror = (err) => {
      console.error("Worker error:", err);
    };
  }

  // Sends a command to the worker and returns a Promise.
  sendCommand(command, parameters = {}) {
    return new Promise((resolve, reject) => {
      const id = ++this.requestId;
      this.callbacks.set(id, { resolve, reject });
      this.worker.postMessage({ id, command, parameters });
    });
  }

  // PDFium API commands.
  initLibrary() {
    return this.sendCommand("initLibrary");
  }

  destroyLibrary() {
    return this.sendCommand("destroyLibrary");
  }

  loadDocument(filePath, password = "") {
    return this.sendCommand("loadDocument", { filePath, password });
  }

  closeDocument(docHandle) {
    return this.sendCommand("closeDocument", { docHandle });
  }

  loadPage(docHandle, pageIndex) {
    return this.sendCommand("loadPage", { docHandle, pageIndex });
  }

  closePage(pageHandle) {
    return this.sendCommand("closePage", { pageHandle });
  }

  renderPage(
    pageHandle,
    startX = 0,
    startY = 0,
    width = 800,
    height = 600,
    rotate = 0,
    flags = 0
  ) {
    return this.sendCommand("renderPage", {
      pageHandle,
      startX,
      startY,
      width,
      height,
      rotate,
      flags,
    });
  }

  // Optional: terminate the worker when finished.
  terminate() {
    this.worker.terminate();
  }
}

// Example usage:
async function exampleUsage() {
  // Create the client (adjust the worker script URL if needed).
  const pdfClient = new PDFiumWorkerClient("pdfium_worker.js");

  try {
    // Wait for the worker to be ready (if necessary, you can listen to the "ready" message).
    // For this example, we assume the worker is ready shortly after instantiation.

    // Initialize library (if not already done automatically).
    await pdfClient.initLibrary();

    // Load a document.
    const { docHandle } = await pdfClient.loadDocument("path/to/document.pdf");

    // Load the first page (page index 0).
    const { pageHandle } = await pdfClient.loadPage(docHandle, 0);

    // Render the page.
    const renderResult = await pdfClient.renderPage(pageHandle, 0, 0, 800, 600, 0, 0);
    // renderResult.imageData is an ArrayBuffer containing RGBA pixel data.
    // renderResult.width and renderResult.height give the dimensions.

    // Use the returned image data (for example, draw it to a canvas).
    const canvas = document.getElementById("pdfCanvas");
    const ctx = canvas.getContext("2d");
    const imageData = new ImageData(
      new Uint8ClampedArray(renderResult.imageData),
      renderResult.width,
      renderResult.height
    );
    ctx.putImageData(imageData, 0, 0);

    // Clean up: close the page and document.
    await pdfClient.closePage(pageHandle);
    await pdfClient.closeDocument(docHandle);
  } catch (err) {
    console.error("Error during pdfium operations:", err);
  } finally {
    // Optionally, terminate the worker if you’re done.
    pdfClient.terminate();
  }
}

// Call the example function.
exampleUsage();