From 368d2fc11ede1d503ef2d2c247852b48b3fcadd0 Mon Sep 17 00:00:00 2001
From: shalvamist <94086448+shalvamist@users.noreply.github.com>
Date: Fri, 27 Jan 2023 08:54:27 -0800
Subject: [PATCH] Added E2E test for Image Tensor API (#14406)

### Description
Added E2E test - Currently covering -
URL --> Tensor
ImageData --> Tensor
HTML Image Element --> Tensor
Tensor --> ImageData

---------

Co-authored-by: shalvamist <shalva.mist@microsoft.com>
---
 js/common/lib/tensor-impl.ts                  | 12 ++--
 .../browser-test-wasm-image-tensor-image.js   | 66 +++++++++++++++++++
 js/web/test/e2e/run.js                        |  1 +
 3 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 js/web/test/e2e/browser-test-wasm-image-tensor-image.js

diff --git a/js/common/lib/tensor-impl.ts b/js/common/lib/tensor-impl.ts
index 19ac99d015..80fc150af0 100644
--- a/js/common/lib/tensor-impl.ts
+++ b/js/common/lib/tensor-impl.ts
@@ -269,12 +269,13 @@ export class Tensor implements TensorInterface {
     if (isHTMLImageEle) {
       // HTMLImageElement - image object - format is RGBA by default
       const canvas = document.createElement('canvas');
+      canvas.width = image.width;
+      canvas.height = image.height;
       const pixels2DContext = canvas.getContext('2d');
 
       if (pixels2DContext != null) {
-        let height = image.naturalHeight;
-        let width = image.naturalWidth;
-
+        let height = image.height;
+        let width = image.width;
         if (options !== undefined && options.resizedHeight !== undefined && options.resizedWidth !== undefined) {
           height = options.resizedHeight;
           width = options.resizedWidth;
@@ -303,10 +304,7 @@ export class Tensor implements TensorInterface {
           tensorConfig.width = width;
         }
 
-        canvas.width = width;
-        canvas.height = height;
-
-        pixels2DContext.drawImage(image, 0, 0, width, height);
+        pixels2DContext.drawImage(image, 0, 0);
         data = pixels2DContext.getImageData(0, 0, width, height).data;
       } else {
         throw new Error('Can not access image data');
diff --git a/js/web/test/e2e/browser-test-wasm-image-tensor-image.js b/js/web/test/e2e/browser-test-wasm-image-tensor-image.js
new file mode 100644
index 0000000000..8346357a72
--- /dev/null
+++ b/js/web/test/e2e/browser-test-wasm-image-tensor-image.js
@@ -0,0 +1,66 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+'use strict';
+
+function getRndColor() {
+  let r = 255*Math.random()|0,
+      g = 255*Math.random()|0,
+      b = 255*Math.random()|0;
+  return 'rgb(' + r + ',' + g + ',' + b + ')';
+}
+
+it('Browser E2E testing - Tensor <--> Image E2E test', async function () {
+
+  // Creating Image HTML Image Element
+  let img = document.createElement('img');
+  img.crossOrigin = 'Anonymous';
+  const canvas = document.createElement('canvas');
+  canvas.height = 200;
+  canvas.width = 200;
+  const context = canvas.getContext('2d');
+  let y, x;
+
+  for(y = 0; y < 200; y++) {
+    for(x = 0; x < 200; x++) {
+        context.fillStyle = getRndColor();
+        context.fillRect(x, y, 1, 1);
+      }
+  }
+
+  img = canvas.toDataURL();
+
+  // Image HTML element to tensor API
+  const inputTensorHTML = await ort.Tensor.fromImage(img);
+  // Tensor to ImageDAta API
+  let newImage = inputTensorHTML.toImageData();
+  // ImageData to tensor API
+  let inputTensorImageData = await ort.Tensor.fromImage(newImage);
+
+  for (let i = 0; i < newImage.height*newImage.width*3; i++) {
+    if(inputTensorImageData.data[i]!==inputTensorHTML.data[i]){
+      console.log("Element - " + i + " - " + inputTensorHTML.data[i] + " - " + inputTensorImageData.data[i]);
+      throw new Error('BUG in ImageData & URL');
+    }
+  }
+
+  let online = navigator.onLine;
+
+  if(online){
+    // URL element to tensor API
+    const inputTensorURL = await ort.Tensor.fromImage('https://media.istockphoto.com/id/172859087/photo/square-eggs.jpg?s=2048x2048&w=is&k=20&c=KiBRyyYaoUUSjcJLBh1-qqVu7LW6UQZBopZdva0f5e4=');
+    // Tensor to ImageDAta API
+    newImage = inputTensorURL.toImageData();
+    // ImageData to tensor API
+    inputTensorImageData = await ort.Tensor.fromImage(newImage);
+
+    for (let i = 0; i < newImage.height*newImage.width*3; i++) {
+      if(inputTensorURL.data[i]!==inputTensorImageData.data[i]){
+        console.log("Element - " + i + " - " + inputTensorURL.data[i] + " - " + inputTensorImageData.data[i]);
+        throw new Error('BUG in ImageData & URL');
+      }
+    }
+  }else{
+    console.log("No internet connection - didn't test Image URL to tensor API");
+  }
+});
diff --git a/js/web/test/e2e/run.js b/js/web/test/e2e/run.js
index 517ff7b849..6e69ab143f 100644
--- a/js/web/test/e2e/run.js
+++ b/js/web/test/e2e/run.js
@@ -109,6 +109,7 @@ async function testAllBrowserCases({ hostInKarma }) {
   await runKarma({ hostInKarma, main: './browser-test-wasm-path-override-filename.js', ortMain: 'ort.wasm.min.js'});
   await runKarma({ hostInKarma, main: './browser-test-wasm-path-override-prefix.js'});
   await runKarma({ hostInKarma, main: './browser-test-wasm-path-override-prefix.js', ortMain: 'ort.wasm.min.js'});
+  await runKarma({ hostInKarma, main: './browser-test-wasm-image-tensor-image.js'});
 }
 
 async function runKarma({ hostInKarma, main, browser = 'Chrome_default', ortMain = 'ort.min.js' }) {