Text watermark plugin sample
The afterDecode hook draws a text watermark onto each page after the viewer has decoded it. It hands back the image it drew, so the page reaches the canvas without the second decode and the lossy re-encode that transforming the fetched JPEG would cost.
Source code
1import * as ComicViewer from "@publira/comic-viewer";23const watermarkPlugin = ComicViewer.definePlugin({4 name: "text-watermark",5 // The page has already been decoded, so the watermark is drawn onto the6 // image itself instead of being re-encoded as a JPEG for the viewer.7 afterDecode: ({ image }) => addWatermark(image),8});910export const Reader = ({ pages }) => (11 <ComicViewer.Root pages={pages} plugins={[watermarkPlugin]}>12 <ComicViewer.Viewport />13 <ComicViewer.Toolbar />14 <ComicViewer.PageNavigation />15 </ComicViewer.Root>16);