Custom MainLayerRenderer

[wrong7]

Before you start - checklist

• I understand that React-PDF does not aim to be a fully-fledged PDF viewer and is only a tool to make one
• I have checked if this feature request is not already reported

Description

I would like to get a new renderer besides SVG and Canvas, as I would like to use plain images as a render mode (which I belive is what canvas is doing under the hood).

The final goal is to create a renderer that includes the page as multiple chunks of images (512x512px max) so that it can be lazy loaded. This is what PSPDFKit library does if you check the resultant HTML (https://i.imgur.com/7SMZmrg.png).

I have tried overwritting the canvas render using onRenderSuccess and extracting the image from the canvas myself:

function onRenderSuccessPage({ numPages }) {
  let objs = document.getElementsByTagName("canvas")
  for(let i=0; i < objs.length; i++){
    let img = new Image();
    img.src = objs[i].toDataURL();
    let elements = objs[i].parentElement.getElementsByTagName("img")
    for (let i = 0; i < elements.length; i++) {
      elements[i].parentNode.removeChild(elements[i]);
    }

    objs[i].parentElement.insertBefore(img,objs[i]);
    objs[i].style.opacity = "0";
  }
}

with a custom CSS for canvas

canvas {
  display: contents !important;
}

The result is a bit sketchy:

Proposed solution

Add a customMainLayerRenderer prop for Page component

Alternatives

No response

Additional information

No response

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.