[utils] Adds ml5.flipImage() to flip images horizontally (#656)

* adds flipImage to utils

* adds p5 utils to flip video

Author: joeyklee

src/utils/imageUtilities.js

@@ -4,6 +4,7 @@
 // https://opensource.org/licenses/MIT
 
 import * as tf from '@tensorflow/tfjs';
+import p5Utils from './p5Utils';
 
 // Resize video elements
 const processVideo = (input, size, callback = () => {}) => {
@@ -61,6 +62,64 @@ const cropImage = (img) => {
   return img.slice([beginHeight, beginWidth, 0], [size, size, 3]);
 };
 
+const flipImage = (img) => {
+  // image image, bitmap, or canvas
+  let imgWidth;
+  let imgHeight;
+  let inputImg;
+
+  if (img instanceof HTMLImageElement ||
+    img instanceof HTMLCanvasElement ||
+    img instanceof HTMLVideoElement ||
+    img instanceof ImageData) {
+    inputImg = img;
+  } else if (typeof img === 'object' &&
+    (img.elt instanceof HTMLImageElement ||
+      img.elt instanceof HTMLCanvasElement ||
+      img.elt instanceof HTMLVideoElement ||
+      img.elt instanceof ImageData)) {
+
+    inputImg = img.elt; // Handle p5.js image
+  } else if (typeof img === 'object' &&
+    img.canvas instanceof HTMLCanvasElement) {
+    inputImg = img.canvas; // Handle p5.js image
+  } else {
+    inputImg = img;
+  }
+
+  if (inputImg instanceof HTMLVideoElement) {
+    // should be videoWidth, videoHeight?
+    imgWidth = inputImg.width;
+    imgHeight = inputImg.height;
+  } else {
+    imgWidth = inputImg.width;
+    imgHeight = inputImg.height;
+  }
+
+
+  if (p5Utils.checkP5()) {
+    const p5Canvas = p5Utils.p5Instance.createGraphics(imgWidth, imgHeight);
+    p5Canvas.push()
+    p5Canvas.translate(imgWidth, 0);
+    p5Canvas.scale(-1, 1);
+    p5Canvas.image(img, 0, 0, imgWidth, imgHeight);
+    p5Canvas.pop()
+
+    return p5Canvas;
+  }
+  const canvas = document.createElement('canvas');
+  canvas.width = imgWidth;
+  canvas.height = imgHeight;
+
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(inputImg, 0, 0, imgWidth, imgHeight);
+  ctx.translate(imgWidth, 0);
+  ctx.scale(-1, 1);
+  ctx.drawImage(canvas, imgWidth * -1, 0, imgWidth, imgHeight);
+  return canvas;
+
+}
+
 // Static Method: image to tf tensor
 function imgToTensor(input, size = null) {
   return tf.tidy(() => {
@@ -79,4 +138,5 @@ export {
   processVideo,
   cropImage,
   imgToTensor,
-};
+  flipImage
+};