How can I mirror/flip a pdf?

[courtneypattison]

Hello, How would I go about mirroring/flipping a pdf? It looks like the scale prop on Page combines x and y into one scaling factor. I've tried using canvasRef with no luck.

import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";

import { CSSProperties, useEffect, useRef, useState } from "react";
import { Document, Page, pdfjs } from "react-pdf";

import type { PDFDocumentProxy } from "pdfjs-dist";
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.js",
  import.meta.url
).toString();

export default function PdfViewer({
  file,
  style,
}: {
  file: File | null;
  style: CSSProperties;
}) {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const [numPages, setNumPages] = useState<number>();
  const [isRendered, setIsRendered] = useState(false);

  function onRenderSuccess() {
    setIsRendered(true);
  }

  function onDocumentLoadSuccess({
    numPages: nextNumPages,
  }: PDFDocumentProxy): void {
    setNumPages(nextNumPages);
  }

  useEffect(() => {
    if (canvasRef !== null && canvasRef.current !== null) {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext("2d");

      if (ctx !== null) {
        ctx.scale(-1, 1);
      }
    }
  }, [isRendered]);

  return (
    <>
      <div className="absolute z-0" style={style}>
        <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
          {Array.from(new Array(numPages), (el, index) => (
            <Page
              canvasRef={canvasRef}
              key={`page_${index + 1}`}
              pageNumber={index + 1}
              onRenderSuccess={onRenderSuccess}
            /> 
          ))}
        </Document>
      </div>
    </>
  );
}

Thank you!

[courtneypattison]

I just ended up scaling it with a CSS transform :)

[wojtekmaj]

Yeah I think that'd be the only sensible way of doing it! Especially when considering PDF is rendered in layers.