JSFiddle - React, Tailwind, and code Playground

by gavinfoley

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<video width=540 crossOrigin="anonymous" id="video" controls="controls">
  <source src="https://wipdev.blob.core.windows.net/video/Adobe Walkthrough v11.mp4" />
</video>

<button id="capture">Capture</button>

JavaScript

$(function() {

  var $vid = $("#video");
  finalImageDimensions = calculateAspectRatioFit($vid.width(), $vid.height(), 960, 540),
    tempCanvas = CreateCanvas('c', finalImageDimensions.width, finalImageDimensions.height),
    iconUrl = 'https://i.imgur.com/sVR6CXf.png';

  $('#capture').on('click', function() {
    var frameUrl = extractFrameFromVideo(tempCanvas, $vid);

    overlayImageOnImagePromise(tempCanvas, frameUrl, iconUrl)
      .then(function(result) {
        addImageToDom(result, $('body'));
      })
      .catch(function(error) {
        alert(error);
      });

  });

});

function CreateCanvas(id, width, height) {
  var canvas = document.createElement("canvas");
  canvas.crossOrigin = "anonymous";
  canvas.setAttribute('id', id);
  canvas.width = width;
  canvas.height = height;
  return canvas;
}

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
  var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
  return {
    width: srcWidth * ratio,
    height: srcHeight * ratio
  };
}

function extractFrameFromVideo(canvas, $video) {
  canvas.getContext('2d').drawImage($video[0], 0, 0, canvas.width, canvas.height);
  return canvas.toDataURL("image/jpeg", 1);
}

function addImageToDom(imageUrl, $parentEle) {
  var img = new Image();
  img.setAttribute('crossOrigin', 'anonymous');
  img.src = imageUrl;
  $parentEle.append(img);
}

function overlayImageOnImagePromise(canvas, baseImageUrl, overlayedImage) {
  var fabricCanvas = new fabric.Canvas(canvas);
  fabricCanvas.renderOnAddition = true;
  var mergedImageUrl = "";

  var promiseResolve, promiseReject;

  var promise = new Promise(function(resolve, reject) {
    promiseResolve = resolve;
    promiseReject = reject;
  });

  try {

    // Set bg image
    fabricCanvas.setBackgroundImage(baseImageUrl, fabricCanvas.renderAll.bind(fabricCanvas),
    {
      crossOrigin: '*'
    });

    fabric.Image.fromURL(overlayedImage, function(img) {
      img.left = 5;
     ...