-
Notifications
You must be signed in to change notification settings - Fork 54
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Alastair Carey
committed
Aug 11, 2024
1 parent
876842d
commit 6d76ba6
Showing
2 changed files
with
132 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,103 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <script src="pdfium.js"></script> | ||
| <script src="pdfium_render_wasm_example.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <canvas id="canvas" style="max-width: 100%; height: auto; border: 1px solid black;"></canvas> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <script src="pdfium.js"></script> | ||
| <script src="pdfium_render_wasm_example.js"></script> | ||
| </head> | ||
|
|
||
| <script> | ||
| // The Rust sample code that accompanies this file can be found in wasm.rs. | ||
| <body> | ||
| <canvas id="canvas" style="max-width: 100%; height: auto; border: 1px solid black;"></canvas> | ||
|
|
||
| // We export two functions from our Rust code via #[wasm_bindgen] declarations. | ||
| // We'll call these two functions below from Javascript - but first, we need to get | ||
| // the WASM modules for Pdfium and pdfium-render talking to each other. | ||
| <script> | ||
| // The Rust sample code that accompanies this file can be found in wasm.rs. | ||
|
|
||
| // First, we initialize Pdfium's Emscripten-wrapped WASM module. The exact way in which | ||
| // we do this depends on the way in which the Pdfium WASM module was built. | ||
| // For Pdfium WASM modules downloaded from https://github.com/paulocoutinhox/pdfium-lib/releases | ||
| // _before_ version V5407, the Pdfium WASM module can be initialized like this: | ||
| // We export two functions from our Rust code via #[wasm_bindgen] declarations. | ||
| // We'll call these two functions below from Javascript - but first, we need to get | ||
| // the WASM modules for Pdfium and pdfium-render talking to each other. | ||
|
|
||
| // Module.onRuntimeInitialized = (async _ => { | ||
| // pdfiumModule = Module; | ||
| // First, we initialize Pdfium's Emscripten-wrapped WASM module. The exact way in which | ||
| // we do this depends on the way in which the Pdfium WASM module was built. | ||
| // For Pdfium WASM modules downloaded from https://github.com/paulocoutinhox/pdfium-lib/releases | ||
| // _before_ version V5407, the Pdfium WASM module can be initialized like this: | ||
|
|
||
| // For Pdfium WASM modules downloaded from https://github.com/paulocoutinhox/pdfium-lib/releases | ||
| // _after or including_ version V5407, the Pdfium WASM module can be initialized like this: | ||
| // Module.onRuntimeInitialized = (async _ => { | ||
| // pdfiumModule = Module; | ||
|
|
||
| // PDFiumModule().then(async pdfiumModule => { | ||
| // For Pdfium WASM modules downloaded from https://github.com/paulocoutinhox/pdfium-lib/releases | ||
| // _after or including_ version V5407, the Pdfium WASM module can be initialized like this: | ||
|
|
||
| // No other changes are required. The remainder of this example assumes we are using | ||
| // V5407 or later. | ||
| // PDFiumModule().then(async pdfiumModule => { | ||
|
|
||
| PDFiumModule().then(async pdfiumModule => { | ||
| // Pdfium's WASM module has now been loaded and initialized. We need to tell | ||
| // pdfium-render about Pdfium's WASM module, so it can bind to the Pdfium API | ||
| // functions exported by the module. | ||
| // No other changes are required. The remainder of this example assumes we are using | ||
| // V5407 or later. | ||
|
|
||
| // In addition to any functions exported by our Rust application, pdfium-render will | ||
| // always export an initialization function, initialize_pdfium_render(), | ||
| // which _must_ be called from Javascript prior to the use of any Pdfium functionality. | ||
| PDFiumModule().then(async pdfiumModule => { | ||
| // Pdfium's WASM module has now been loaded and initialized. We need to tell | ||
| // pdfium-render about Pdfium's WASM module, so it can bind to the Pdfium API | ||
| // functions exported by the module. | ||
|
|
||
| const { | ||
| initialize_pdfium_render, // Always provided by pdfium-render | ||
| log_page_metrics_to_console, // Defined by us ... | ||
| get_image_data_for_page // ... in examples/wasm.rs | ||
| } = wasm_bindgen; | ||
| // In addition to any functions exported by our Rust application, pdfium-render will | ||
| // always export an initialization function, initialize_pdfium_render(), | ||
| // which _must_ be called from Javascript prior to the use of any Pdfium functionality. | ||
|
|
||
| // Next, we load the WASM module generated by wasm-pack that contains our Rust | ||
| // application and pdfium-render. | ||
| const { | ||
| initialize_pdfium_render, // Always provided by pdfium-render | ||
| log_page_metrics_to_console, // Defined by us ... | ||
| get_image_data_for_page // ... in examples/wasm.rs | ||
| } = wasm_bindgen; | ||
|
|
||
| wasm_bindgen('pdfium_render_wasm_example_bg.wasm').then(async rustModule => { | ||
| // The functions exported by our Rust application are now loaded and available. | ||
| // Next, we load the WASM module generated by wasm-pack that contains our Rust | ||
| // application and pdfium-render. | ||
|
|
||
| // First, we call pdfium-render's exported initialize_pdfium_render() function, | ||
| // passing in the WASM modules for both Pdfium and our Rust application, along | ||
| // with a debug flag. pdfium-render will bind to the functions it needs from the | ||
| // Pdfium WASM module and return a boolean value indicating success or failure. | ||
| wasm_bindgen('pdfium_render_wasm_example_bg.wasm').then(async rustModule => { | ||
| // The functions exported by our Rust application are now loaded and available. | ||
|
|
||
| console.assert( | ||
| initialize_pdfium_render( | ||
| pdfiumModule, // Emscripten-wrapped Pdfium WASM module | ||
| rustModule, // wasm_bindgen-wrapped WASM module built from our Rust application | ||
| false, // Debugging flag; set this to true to get tracing information logged to the Javascript console | ||
| ), | ||
| "Initialization of pdfium-render failed!" | ||
| ); | ||
| // First, we call pdfium-render's exported initialize_pdfium_render() function, | ||
| // passing in the WASM modules for both Pdfium and our Rust application, along | ||
| // with a debug flag. pdfium-render will bind to the functions it needs from the | ||
| // Pdfium WASM module and return a boolean value indicating success or failure. | ||
|
|
||
| // Now we can call the Rust functions we exported in example/wasm.rs. | ||
| console.assert( | ||
| initialize_pdfium_render( | ||
| pdfiumModule, // Emscripten-wrapped Pdfium WASM module | ||
| rustModule, // wasm_bindgen-wrapped WASM module built from our Rust application | ||
| false, // Debugging flag; set this to true to get tracing information logged to the Javascript console | ||
| ), | ||
| "Initialization of pdfium-render failed!" | ||
| ); | ||
|
|
||
| // The first function dumps sizing metrics for each page in our target PDF file | ||
| // to the console. The file will be retrieved over the network using the browser's | ||
| // built-in fetch() function. | ||
| // Now we can call the Rust functions we exported in example/wasm.rs. | ||
|
|
||
| const targetDocument = "./test.pdf"; | ||
| // The first function dumps sizing metrics for each page in our target PDF file | ||
| // to the console. The file will be retrieved over the network using the browser's | ||
| // built-in fetch() function. | ||
|
|
||
| await log_page_metrics_to_console(targetDocument); | ||
| const targetDocument = "./test.pdf"; | ||
|
|
||
| // The second function generates the ImageData object for a single page in | ||
| // our target PDF file. We can render this ImageData directly to an HTML canvas. | ||
| await log_page_metrics_to_console(targetDocument); | ||
|
|
||
| const pageIndex = 0; // Zero-based index of the page we wish to render. | ||
| const width = 1414; | ||
| const height = 1999; | ||
| // The second function generates the ImageData object for a single page in | ||
| // our target PDF file. We can render this ImageData directly to an HTML canvas. | ||
|
|
||
| const canvas = document.getElementById("canvas"); | ||
| const pageIndex = 0; // Zero-based index of the page we wish to render. | ||
| const width = 1414; | ||
| const height = 1999; | ||
|
|
||
| canvas.width = width; | ||
| canvas.height = height; | ||
| const canvas = document.getElementById("canvas"); | ||
|
|
||
| const context = canvas.getContext("2d"); | ||
| canvas.width = width; | ||
| canvas.height = height; | ||
|
|
||
| const imageData = await get_image_data_for_page(targetDocument, pageIndex, width, height); | ||
| const context = canvas.getContext("2d"); | ||
|
|
||
| context.putImageData(imageData, 0, 0); | ||
| }); | ||
| const imageData = await get_image_data_for_page(targetDocument, pageIndex, width, height); | ||
|
|
||
| context.putImageData(imageData, 0, 0); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> | ||
| }); | ||
| </script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters