ivmartel/dwv

import {Size} from '../image/size';
import {Spacing} from '../image/spacing';
import {Geometry} from '../image/geometry';
import {Image} from '../image/image';
import {Point3D} from '../math/point';

/**
 * Create a simple array buffer from an ImageData buffer.
 *
 * @param {object} imageData The ImageData taken from a context.
 * @returns {Uint8Array} The image buffer.
 */
function imageDataToBuffer(imageData) {
  // remove alpha
  // TODO support passing the full image data
  const dataLen = imageData.data.length;
  const buffer = new Uint8Array((dataLen / 4) * 3);
  let j = 0;
  for (let i = 0; i < dataLen; i += 4) {
    buffer[j] = imageData.data[i];
    buffer[j + 1] = imageData.data[i + 1];
    buffer[j + 2] = imageData.data[i + 2];
    j += 3;
  }
  return buffer;
}

/**
 * Get an image from an input context imageData.
 *
 * @param {number} width The width of the coresponding image.
 * @param {number} height The height of the coresponding image.
 * @param {number} sliceIndex The slice index of the imageData.
 * @param {object} imageBuffer The image buffer.
 * @param {number} numberOfFrames The final number of frames.
 * @param {string} imageUid The image UID.
 * @returns {object} The corresponding view.
 */
function getDefaultImage(
  width, height, sliceIndex,
  imageBuffer, numberOfFrames,
  imageUid) {
  // image size
  const imageSize = new Size([width, height, 1]);
  // default spacing
  // TODO: misleading...
  const imageSpacing = new Spacing([1, 1, 1]);
  // default origin
  const origin = new Point3D(0, 0, sliceIndex);
  // create image
  const geometry = new Geometry(origin, imageSize, imageSpacing);
  const image = new Image(geometry, imageBuffer, [imageUid]);
  image.setPhotometricInterpretation('RGB');
  // meta information
  const meta = {};
  meta.BitsStored = 8;
  if (typeof numberOfFrames !== 'undefined') {
    meta.numberOfFiles = numberOfFrames;
  }
  image.setMeta(meta);
  // return
  return image;
}

/**
 * Get data from an input image using a canvas.
 *
 * @param {HTMLImageElement} domImage The DOM Image,
 *   an HTMLImageElement with extra info.
 * @param {string|File} origin The data origin.
 * @param {number} index The data index.
 * @returns {object} A load data event.
 */
export function getViewFromDOMImage(domImage, origin, index) {
  // image size
  const width = domImage.width;
  const height = domImage.height;

  // draw the image in the canvas in order to get its data
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(domImage, 0, 0);
  // get the image data
  const imageData = ctx.getImageData(0, 0, width, height);

  // image properties
  const info = {};
  if (typeof origin === 'string') {
    info['origin'] = {value: origin};
  } else {
    info['fileName'] = {value: origin.name};
    info['fileType'] = {value: origin.type};
    info['fileLastModifiedDate'] = {value: origin.lastModified};
  }
  info['imageWidth'] = {value: width};
  info['imageHeight'] = {value: height};

  const sliceIndex = index ? index : 0;
  info['imageUid'] = {value: sliceIndex};

  // create view
  const imageBuffer = imageDataToBuffer(imageData);
  const image = getDefaultImage(
    width, height, sliceIndex, imageBuffer, 1, sliceIndex.toString());

  // return
  return {
    data: {
      image: image,
      info: info
    },
    source: origin
  };
}

/**
 * Get data from an input image using a canvas.
 *
 * @param {object} video The DOM Video, an HTMLVideoElement with extra info.
 * @param {Function} onloaditem On load callback.
 * @param {object} onload The function to call once the data is loaded.
 * @param {object} onprogress The function to call to report progress.
 * @param {object} onloadend The function to call to report load end.
 * @param {string|File} origin The data origin.
 * @param {number} dataIndex The data index.
 */
export function getViewFromDOMVideo(
  video, onloaditem, onload, onprogress, onloadend,
  origin, dataIndex) {
  // video size
  const width = video.videoWidth;
  const height = video.videoHeight;

  // default frame rate...
  const frameRate = 30;
  // number of frames
  const numberOfFrames = Math.ceil(video.duration * frameRate);

  // video properties
  const info = {};
  if (typeof origin === 'string') {
    info['origin'] = {value: origin};
  } else {
    info['fileName'] = {value: origin.name};
    info['fileType'] = {value: origin.type};
    info['fileLastModifiedDate'] = {value: origin.lastModified};
  }
  info['imageWidth'] = {value: width};
  info['imageHeight'] = {value: height};
  info['numberOfFrames'] = {value: numberOfFrames};
  info['imageUid'] = {value: 0};

  // draw the image in the canvas in order to get its data
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');

  // using seeked to loop through all video frames
  video.addEventListener('seeked', onseeked, false);

  // current frame index
  let frameIndex = 0;
  // video image
  let image = null;

  /**
   * Draw the context and store it as a frame.
   */
  function storeFrame() {
    // send progress
    onprogress({
      lengthComputable: true,
      loaded: frameIndex,
      total: numberOfFrames,
      index: dataIndex,
      source: origin
    });
    // draw image
    ctx.drawImage(video, 0, 0);
    // context to image buffer
    const imgBuffer = imageDataToBuffer(
      ctx.getImageData(0, 0, width, height));
    if (frameIndex === 0) {
      // create view
      image = getDefaultImage(
        width, height, 1, imgBuffer, numberOfFrames, dataIndex.toString());
      // call callback
      onloaditem({
        data: {
          image: image,
          info: info
        },
        source: origin
      });
    } else {
      image.appendFrameBuffer(imgBuffer, frameIndex);
    }
    // increment index
    ++frameIndex;
  }

  let nextTime = 0;

  /**
   * Handle seeked event.
   *
   * @param {object} event The seeked event.
   */
  function onseeked(event) {
    // store
    storeFrame();
    // set the next time
    // (not using currentTime, it seems to get offseted)
    nextTime += 1 / frameRate;
    if (nextTime <= event.target.duration) {
      this.currentTime = nextTime;
    } else {
      onload({
        source: origin
      });
      onloadend({
        source: origin
      });
      // stop listening
      video.removeEventListener('seeked', onseeked);
    }
  }

  // trigger the first seek
  video.currentTime = nextTime;
}