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>
This commit is contained in:
shalvamist 2023-01-27 08:54:27 -08:00 committed by GitHub
parent 4ef64f3681
commit 368d2fc11e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 7 deletions

View file

@ -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');

View file

@ -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");
}
});

View file

@ -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' }) {