[JS/Common] Fix malformed result of Tensor.fromImage(ImageBitmap) (#16919)

### Description

Set `canvas` dimensions to the `ImageBitmap` dimensions, thus fixing a
malformed Tensor creation.

### Motivation and Context

According to the [HTMLCanvasElement.drawImage()
spec](https://html.spec.whatwg.org/multipage/canvas.html#drawing-images):
> When the destination rectangle is outside the destination image (the
output bitmap), the pixels that land outside the output bitmap are
discarded, as if the destination was an infinite canvas whose rendering
was clipped to the dimensions of the output bitmap.

meaning that `ImageBitmap` pixels exceeding the canvas dimensions will
be discarded. Since no canvas dimensions are set for
`Tensor.fromImage(ImageBitmap)` if-case, the default 300x150px canvas
dimensions are used leading to the creation of malformed Tensors where
all the exceeding pixels are discarded and equal to `0, 0, 0, 0` during
the subsequent `pixels2DContext.getImageData()` call.
This commit is contained in:
Artyom Stepanishchev 2023-08-01 05:18:06 +04:00 committed by GitHub
parent fa8487ea3a
commit ba23e5b234
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -190,7 +190,10 @@ export const tensorFromImage = async(
throw new Error('Please provide image config with format for Imagebitmap');
}
const pixels2DContext = document.createElement('canvas').getContext('2d');
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const pixels2DContext = canvas.getContext('2d');
if (pixels2DContext != null) {
const height = image.height;