Face compare with drag/drop

by morphcast

HTML

<script src="https://sdk.morphcast.com/mphtools/v1.0/mphtools.js"></script>
<script src="https://ai-sdk.morphcast.com/dev/plugin-face-compare.js"></script>
<script src="https://ai-sdk.morphcast.com/dev/ai-sdk.js"></script>

<form id="myForm">
  <div>
    <b>SDK with FACE_COMPARE (dev) - version 1 and 2</b>
  </div>
  <br />
  <div id="instructions">
    Drag and drop one or two images. Then two faces will be compared.
  </div>
  <br /><br />
  <canvas style="border:1px solid grey;" id="my_canvas" width="300" height="300"></canvas>
  <canvas style="border:1px solid grey;" id="my_canvas2" width="300" height="300"></canvas>
  <div>
    <button id="compare" type="button" disabled>Compare</button>
  </div>
  <br />
  <div id="result">

  </div>
</form>
<script>
  const CLIPBOARD = new CLIPBOARD_CLASS("my_canvas", true);
  const CLIPBOARD2 = new CLIPBOARD_CLASS("my_canvas2", true);

  /**
   * image pasting into canvas
   * 
   * @param {string} canvas_id - canvas id
   * @param {boolean} autoresize - if canvas will be resized
   */
  function CLIPBOARD_CLASS(canvas_id, autoresize) {
    const _self = this;
    const canvas = document.getElementById(canvas_id);
    const ctx = document.getElementById(canvas_id).getContext("2d");

    //handlers

    /* events fired on the drop targets */
    canvas.addEventListener("dragover", function(e) {
      // prevent default to allow drop
      e.preventDefault();
    }, false);
    canvas.addEventListener('drop', function(e) {
      document.getElementById('result').innerHTML = '';
      // prevent default action (open as link for some elements)
      // add event handler to canvas if desired instead of document
      //debugger;
      e.preventDefault();
      const items = e.dataTransfer.items;
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {

          //image
          const blob = items[i].getAsFile();
          const URLObj = window.URL || window.webkitURL;
         ...