PDF image diff

[Matt Parizeau]

Q:

Is it possible to display the differences between two PDF documents? For simplicity assume that they are both one page.

A:

Yes, you could load the first document in the viewer and then load a second document in memory and render the first page onto a canvas. Then you could append the canvas over top of the viewer and update the color of the pixels to indicate where the files overlap.

Here is code that you could put into a config file. Note the places where you should enter your license key and the path to the second document.

$(document).on('documentLoaded', function() {
  var newDoc = new CoreControls.Document('file.pdf', 'pdf');
  var docLocation = '/PATH/TO/OTHER/DOCUMENT.pdf';
  var pageIndex = 0;
  var currentLoadCanvas;
  var lastRenderRect;

  function update() {
    currentLoadCanvas = updatePage(newDoc, pageIndex, currentLoadCanvas, lastRenderRect);
  }

  loadDocument(newDoc, docLocation, function() {
    if ($('.canvas' + pageIndex).length > 0) {
      update();
    }

    readerControl.docViewer.on('pageComplete', function(e, completedPageIndex) {
      if (completedPageIndex === pageIndex) {
        update();
      }
    });
  });

  readerControl.docViewer.on('beginRendering', function() {
    lastRenderRect = readerControl.docViewer.getViewportRegionRect(readerControl.docViewer.getCurrentPage() - 1);
    if (currentLoadCanvas) {
      newDoc.cancelLoadCanvas(currentLoadCanvas);
    }
  });
});

var updatePage = function(doc, pageIndex, currentLoadCanvas, lastRenderRect) {
  if (currentLoadCanvas) {
    doc.cancelLoadCanvas(currentLoadCanvas);
  }

  var firstDocCanvas = $('.canvas' + pageIndex)[0];
  // make first doc blue
  var firstDocCtx = firstDocCanvas.getContext('2d');
  var firstDocImageData = firstDocCtx.getImageData(0, 0, firstDocCanvas.width, firstDocCanvas.height);
  var firstDocData = firstDocImageData.data;

  for (var i = 0; i < firstDocData.length; i += 4) {
    // make all non-white pixels blue
    var isWhite = firstDocData[i] === 255 && firstDocData[i + 1] === 255 && firstDocData[i + 2] === 255;
    if (!isWhite) {
      firstDocData[i] = 0;
      firstDocData[i + 1] = 0;
      firstDocData[i + 2] = 255;
    }
  }
  firstDocCtx.putImageData(firstDocImageData, 0, 0);

  var isViewportRender = firstDocCanvas.style.left !== '';

  return doc.loadCanvasAsync({
    pageIndex: pageIndex,
    canvasNum: 1,
    getZoom: function() {
      return readerControl.docViewer.getZoom();
    },
    drawComplete: function(pageCanvas) {
      $('.canvasOverlay').remove();

      var $pageCanvas = $(pageCanvas);
      $pageCanvas.css({
        position: 'absolute',
        'z-index': 25,
        left: firstDocCanvas.style.left,
        top: firstDocCanvas.style.top,
        'background-color': ''
      });
      $pageCanvas.addClass('canvasOverlay');
      $('#pageContainer' + pageIndex).append(pageCanvas);

      var ctx = pageCanvas.getContext('2d');
      var imageData = ctx.getImageData(0, 0, pageCanvas.width, pageCanvas.height);
      var data = imageData.data;

      for (var i = 0; i < data.length; i += 4) {
        // make all white pixels transparent
        if (data[i] === 255 && data[i + 1] === 255 && data[i + 2] === 255) {
          data[i + 3] = 0;
        } else {
          var coords = getCoords(i, pageCanvas.width);
          var index = getIndex(coords, firstDocCanvas.width);
          if (coords.y <= firstDocCanvas.height && coords.x <= firstDocCanvas.width &&
            (firstDocData[index] !== 255 || firstDocData[index + 1] !== 255 || firstDocData[index + 2] !== 255)) {
            // make overlapping pixels gray
            data[i] = 128;
            data[i + 1] = 128;
            data[i + 2] = 128;
          } else {
            // make all other pixels red
            data[i] = 255;
            data[i + 1] = 0;
            data[i + 2] = 0;
          }
        }
      }
      ctx.putImageData(imageData, 0, 0);
    },
    renderRect: isViewportRender ? lastRenderRect : undefined
  });
};

function getCoords(i, width) {
  var pixels = Math.floor(i / 4);

  return {
    x: pixels % width,
    y: Math.floor(pixels / width)
  };
}

function getIndex(coords, width) {
  return ((coords.y * width) + coords.x) * 4;
}

function loadDocument(doc, docLocation, callback) {
  CoreControls.getDefaultBackendType().then(function(backendType) {
      var options = {
        workerTransportPromise: CoreControls.initPDFWorkerTransports(backendType, {}, 'LICENSE_KEY_HERE')
      };
      var partRetriever = new CoreControls.PartRetrievers.ExternalPdfPartRetriever(docLocation);
      doc.loadAsync(partRetriever, callback, options);
  });
}