<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/xsl" href="blog.xsl"?>
 <title>How to Build an Image Extraction Webapp using Java</title>
 <excerpt>Our second image extraction article, this time using a java webapp.</excerpt>
 <tags>bitmap extraction image</tags>
   In this post we will take the code from our previous
   <a href="/blog/2016/11/24/extracting_images_from_pdf_with_the_bfo_pdf_library/">Image Extraction post</a>
   to build a complete web service/web-app for
   uploading PDFs and also for downloading extracted images.

  <h2>A few modifications to the Java program</h2>
   If you compare the <a viewtext="true" href="SimpleExtractor.java">Java code</a> from this
   blog post to the
   <a href="/blog/2016/11/24/extracting_images_from_pdf_with_the_bfo_pdf_library/">first post</a>,
   you will spot a couple of subtle differences. Firstly the
   “extraction” code has been shaped into an object. The rendering part has
   been placed into an enum and the main method has been polished to offer some
   command line options like, specifying the source PDF, the output path and
   which bitmap format(s) should be used.
   I also enforced the use of a Java Logger. This is always good to have. It
   will help to keep a clear console output, making it easy to parse from the
   code that will call the Java program.  Another important point is that our
   program should use the <code>System.exit</code> method.  It is used to
   signal how a program is completed. I am sure some of you remember the good
   old Windows 98 days and getting the error messages stating, “system error
   code 8206”.  Any case other than 0 is an error. In our case, I defined two
   error codes:
   <li>The program was not correctly called, there were some missing parameters</li>
   <li>The program could not read the given PDF</li>

  <h2>Using the program we built to create a web-app</h2>
   I went for a JS stack for this web-app, with Node.js/Express in the
   back-end, Vue.js for the front and
   <a href="https://getmdl.io" target= "_blank" rel="nofollow">Material Design Lite</a>
   for the UI.  Let us keep the debate about which tech stack is the best for
   another time!  No matter which techs you are using, the steps are all going
   to be the same:
   <li>User uploads a PDF to your server</li>
   <li>Pass it along to the Java program</li>
   <li>BFO does its work</li>
   <li>Provides an option for the user to download the extracted images</li>
  <h3>Key Points with Express</h3>
   Before pressing ahead we need to help Express upload the PDF files and for
   that we will use the well-known module <code>multer</code>.
  <pre class="brush:javascript">
   // require the module
   var multer = require("multer");
   // create a middleware-helper for the upload
   var upload = multer({ dest: "pdfs/" });
   Once initialized, this module offers us a lot of
   <a href="https://github.com/expressjs/multer" target= "_blank" rel="nofollow">possibilities</a>
   which we will use to create a middleware for handling the upload:
  <pre class="brush:javascript">
   router.post("/extract", upload.single("pdfFile"), function (req, res) {
       // now we can access the uploaded file like that
       let pdfFilePath = req.file.path;
       console.log(`the file was uploaded to ${pdfFilePath}`);
   Another useful module used to manage the file-system and create/delete files
   and folders more easily than the default module of Node.js, is 
   <a href="https://github.com/jprichardson/node-fs-extra" target= "_blank" rel="nofollow"><code>fs-extra</code></a>.
   With that, we will be able to clear entire directories once the users are
   finished with the images.
   However, the most important part of the work on the server side is to call
   the Java extraction program and to harvest the results.  We will use the
   <code>spawn</code> method from the <code>child_process</code> module.  This
   will enable us to run a bash command from node:
  <pre class="brush:javascript">
    let child = spawn(
         // put here the rest of the parameters (pdf file path, type of picture to create, output path to use)
  <p>Once the process has started, we can monitor it by placing listeners:</p>
  <pre class="brush:javascript">
     child.stdout.on('data', (data) => {
       // the process called sent out some text to the standard output (a.k.a System.out.print())
       console.log(`ok data => '${data}'`);

     child.stderr.on('data', (data) => {
       // the process sent out some text on the standard error output (e.g. System.err.println())
       console.log(`err data => '${data}'`);

     child.on('close', (code) => {
       // the process finished, code will be system exit code
       if (code === 0) {
         // it worked!
       } else {
         // there was some error
   You can check the
   <a href="https://github.com/leojpod/ImageExtractor/blob/master/web/routes/api.js" target="_blank">complete code in <code>api.js</code></a>
   to see how the pieces are put together to create the complete service. We have also created a
   <a href="https://github.com/leojpod/ImageExtractor/" target = "_blank"> file repository</a> for reference.
  <b>Leo Jeusset</b><br/>
  Freelance developer and BFO guest blogger<br/>
  <a href="https://twitter.com/leojpod" target="_blank" rel="nofollow"> https://twitter.com/leojpod</a><br/>