From 8ebce9c149112d59552ed530361f80372455fdb2 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Mon, 10 Sep 2018 18:18:49 +0200 Subject: Add Emscripten / WebAssembly build. Requires Linux (or possibly MacOS X) and an installed emsdk to build. --- platform/wasm/readme.html | 135 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 platform/wasm/readme.html (limited to 'platform/wasm/readme.html') diff --git a/platform/wasm/readme.html b/platform/wasm/readme.html new file mode 100644 index 00000000..5d6b97ed --- /dev/null +++ b/platform/wasm/readme.html @@ -0,0 +1,135 @@ + + + +MuPDF / WebAssembly + + + + + +

MuPDF WebAssembly

+ +

Building

+ +

+The WebAssembly build has only been tested on Linux at the moment. +If you use any other platform, you are on your own. + +

+In order to build this you will need to install the +Emscripten SDK +in /opt/emsdk. +If you install it elsewhere, you will need to edit the platform/wasm/build.sh +script to point to the appropriate location. + +

+From the MuPDF project, you can run make wasm to build the WebAssembly +library. The results of the build are a libmupdf.wasm binary and +libmupdf.js script, placed in platform/wasm/. + +

+In order to build a web application based on MuPDF, you will need to copy +these two files and make them available to your page. + +

+The libmupdf.wasm binary is quite large, because it contains not only the MuPDF +library code, but also the 14 core PDF fonts, various CJK mapping resources, +and ICC profiles. In order to keep it as small as possible, it is built with a +minimal features set that does not include CJK fonts, EPUB support, etc. + +

Using

+ +

+The example script in platform/wasm/view.html shows how to use the +MuPDF WebAssembly library. + +

+The first part is including the libmupdf.js script, which pulls in +and instantiates the WebAssembly module: + +

+<script src="libmupdf.js"></script>
+
+ +

+MuPDF uses the Emscripten virtual file system to load a document, so you will +need to seed it with the file you want to view in a Module.preRun +callback function: + +

+<script>
+Module.preRun = function () {
+	FS.createPreloadedFile(".", "input.pdf", "input.pdf", true, false);
+}
+</script>
+
+ +

+When the filesystem has finished preloading the file data and initialized the +code, it will call the Module.postRun callback. From here, you can +use the 'mupdf' object to call various functions to open the document and +render pages into various formats. + +

+
mupdf.openDocument(filename) +
Open a document and return a handle. +
mupdf.freeDocument(doc) +
Free a document and its associated resources. +
mupdf.documentTitle(doc) +
Return the document title as a string. +
mupdf.documentOutline(doc) +
Return a DOM element containing the table of contents formatted as +an unordered HTML list with links to pages using anchor fragments "#page%d". +
mupdf.countPages(doc) +
Return the number of pages in the document. +
mupdf.pageWidth(doc, page, dpi) and mupdf.pageHeight(doc, page, dpi) +
Return the dimensions of a page. Page numbering starts at 1. +
mupdf.drawPageAsPNG(doc, page, dpi) +
Render the page and return a PNG image formatted as a data URI, +suitable for using as an image source attribute. +
mupdf.pageLinks(doc, page, dpi) +
Retrieve an HTML string describing the links on a page, +suitable for including as the innerHTML of an image map. +
mupdf.drawPageAsSVG(doc, page) +
Return a string with the contents of the page in SVG format. +
mupdf.drawPageAsHTML(doc, page) +
Return a string with the contents of the page in HTML format, +using absolute positioned elements. +
+ +

Example

+ +

+Here is a very simple example of loading a document and drawing its first page: + +

+<!DOCTYPE html>
+<html>
+<head>
+<script src="libmupdf.js"></script>
+<script>
+Module.preRun = function () {
+	FS.createPreloadedFile(".", "input.pdf", "input.pdf", true, false);
+}
+Module.postRun = function () {
+	var DPI = 96;
+	var doc = mupdf.openDocument("input.pdf");
+	var img = document.getElementById("page1");
+	img.src = mupdf.drawPageAsPNG(doc, 1, DPI);
+	var map = document.getElementById("page1map");
+	map.innerHTML = mupdf.pageLinks(doc, 1, DPI);
+}
+</script>
+</head>
+<body>
+<img id="page1" usemap="#page1map">
+<map id="page1map" name="page1map"></map>
+</body>
+</html>
+
+ + + -- cgit v1.2.3