javascriptamazon-sagemakermechanicalturk

Why is Crowd HTML breaking this image?


I'm using Crowd HTML Elements to perform bounding box annotation, but when I attempt to load some of my images, I get this error in the dev tools console:

crowd-html-elements.js:1 window.onError received an event without an error:  {event: ErrorEvent}
(anonymous) @ crowd-html-elements.js:1
error (async)
e @ crowd-html-elements.js:1
e @ crowd-html-elements.js:1
./src/crowd-html-elements-loader.ts @ crowd-html-elements.js:1
s @ crowd-html-elements.js:1
(anonymous) @ crowd-html-elements.js:1
(anonymous) @ crowd-html-elements.js:1
crowd-html-elements-without-ce-polyfill.js:6282 window.onError received an event without an error:  {event: ErrorEvent}
(anonymous) @ crowd-html-elements-without-ce-polyfill.js:6282
error (async)
e @ crowd-html-elements-without-ce-polyfill.js:6282
e @ crowd-html-elements-without-ce-polyfill.js:6282
./src/index.ts @ crowd-html-elements-without-ce-polyfill.js:6282
r @ crowd-html-elements-without-ce-polyfill.js:1
(anonymous) @ crowd-html-elements-without-ce-polyfill.js:1
(anonymous) @ crowd-html-elements-without-ce-polyfill.js:1
crowd-html-elements-without-ce-polyfill.js:6282 Uncaught Error: Unexpected image dimensions during normalization
    at Function.normalizeHeight (crowd-html-elements-without-ce-polyfill.js:6282)
    at Function.normalizeDimensions (crowd-html-elements-without-ce-polyfill.js:6282)
    at new a (crowd-html-elements-without-ce-polyfill.js:6282)
    at ie.handleTargetImageLoaded (crowd-html-elements-without-ce-polyfill.js:6282)
    at Image.r.onload (crowd-html-elements-without-ce-polyfill.js:6282)
normalizeHeight @ crowd-html-elements-without-ce-polyfill.js:6282
normalizeDimensions @ crowd-html-elements-without-ce-polyfill.js:6282
a @ crowd-html-elements-without-ce-polyfill.js:6282
handleTargetImageLoaded @ crowd-html-elements-without-ce-polyfill.js:6282
r.onload @ crowd-html-elements-without-ce-polyfill.js:6282
load (async)
setBackgroundImage @ crowd-html-elements-without-ce-polyfill.js:6282
renderImageSrcChange @ crowd-html-elements-without-ce-polyfill.js:6282
shouldComponentUpdate @ crowd-html-elements-without-ce-polyfill.js:6282
q @ crowd-html-elements-without-ce-polyfill.js:6278
B @ crowd-html-elements-without-ce-polyfill.js:6278
q @ crowd-html-elements-without-ce-polyfill.js:6278
B @ crowd-html-elements-without-ce-polyfill.js:6278
F @ crowd-html-elements-without-ce-polyfill.js:6278
N @ crowd-html-elements-without-ce-polyfill.js:6278
E @ crowd-html-elements-without-ce-polyfill.js:6278
N @ crowd-html-elements-without-ce-polyfill.js:6278
E @ crowd-html-elements-without-ce-polyfill.js:6278
N @ crowd-html-elements-without-ce-polyfill.js:6278
E @ crowd-html-elements-without-ce-polyfill.js:6278
N @ crowd-html-elements-without-ce-polyfill.js:6278
T @ crowd-html-elements-without-ce-polyfill.js:6278
q @ crowd-html-elements-without-ce-polyfill.js:6278
B @ crowd-html-elements-without-ce-polyfill.js:6278
F @ crowd-html-elements-without-ce-polyfill.js:6278
N @ crowd-html-elements-without-ce-polyfill.js:6278
T @ crowd-html-elements-without-ce-polyfill.js:6278
G @ crowd-html-elements-without-ce-polyfill.js:6278
w @ crowd-html-elements-without-ce-polyfill.js:6278
S @ crowd-html-elements-without-ce-polyfill.js:6278
e.reactMount @ crowd-html-elements-without-ce-polyfill.js:3
e.updateRegion @ crowd-html-elements-without-ce-polyfill.js:3
(anonymous) @ crowd-html-elements-without-ce-polyfill.js:3
(anonymous) @ crowd-html-elements-without-ce-polyfill.js:3
(anonymous) @ crowd-html-elements-without-ce-polyfill.js:3
e.reactBatchUpdate @ crowd-html-elements-without-ce-polyfill.js:3
i @ crowd-html-elements-without-ce-polyfill.js:3
f.componentDidUpdate @ crowd-html-elements-without-ce-polyfill.js:3
q @ crowd-html-elements-without-ce-polyfill.js:6278
B @ crowd-html-elements-without-ce-polyfill.js:6278
F @ crowd-html-elements-without-ce-polyfill.js:6278
N @ crowd-html-elements-without-ce-polyfill.js:6278
E @ crowd-html-elements-without-ce-polyfill.js:6278
N @ crowd-html-elements-without-ce-polyfill.js:6278
E @ crowd-html-elements-without-ce-polyfill.js:6278
N @ crowd-html-elements-without-ce-polyfill.js:6278
T @ crowd-html-elements-without-ce-polyfill.js:6278
q @ crowd-html-elements-without-ce-polyfill.js:6278
B @ crowd-html-elements-without-ce-polyfill.js:6278
q @ crowd-html-elements-without-ce-polyfill.js:6278
B @ crowd-html-elements-without-ce-polyfill.js:6278
q @ crowd-html-elements-without-ce-polyfill.js:6278
B @ crowd-html-elements-without-ce-polyfill.js:6278
q @ crowd-html-elements-without-ce-polyfill.js:6278
B @ crowd-html-elements-without-ce-polyfill.js:6278
F @ crowd-html-elements-without-ce-polyfill.js:6278
N @ crowd-html-elements-without-ce-polyfill.js:6278
E @ crowd-html-elements-without-ce-polyfill.js:6278
N @ crowd-html-elements-without-ce-polyfill.js:6278
T @ crowd-html-elements-without-ce-polyfill.js:6278
G @ crowd-html-elements-without-ce-polyfill.js:6278
w @ crowd-html-elements-without-ce-polyfill.js:6278
_renderReactComponent @ crowd-html-elements-without-ce-polyfill.js:6282
_updateReactComponent @ crowd-html-elements-without-ce-polyfill.js:6282
Y @ crowd-html-elements-without-ce-polyfill.js:5984
C @ crowd-html-elements-without-ce-polyfill.js:5984
k @ crowd-html-elements-without-ce-polyfill.js:5984
_propertiesChanged @ crowd-html-elements-without-ce-polyfill.js:5984
_flushProperties @ crowd-html-elements-without-ce-polyfill.js:5954
_flushProperties @ crowd-html-elements-without-ce-polyfill.js:5984
_invalidateProperties @ crowd-html-elements-without-ce-polyfill.js:5984
_setProperty @ crowd-html-elements-without-ce-polyfill.js:5984
Object.defineProperty.set @ crowd-html-elements-without-ce-polyfill.js:5954
(anonymous) @ labeling.html:199
async function (async)
(anonymous) @ labeling.html:198
Promise.then (async)
(anonymous) @ labeling.html:196

The Unexpected image dimensions during normalization portion seems like the issue, but I've found nothing with regard to troubleshooting. Can someone explain what expected image dimensions are and why some are failing?

Here's a snippet of the code that's throwing the error.

            static normalizeHeight(e) {
                if (e.height === e.naturalHeight)
                    return e.height;
                if (e.height === e.naturalWidth)
                    return e.height;
                if (Math.abs(e.height - e.naturalHeight) < 2)
                    return e.naturalHeight;
                if (Math.abs(e.height - e.naturalWidth) < 2)
                    return e.naturalWidth;
                throw new Error("Unexpected image dimensions during normalization")
            }
            static normalizeWidth(e) {
                if (e.width === e.naturalWidth)
                    return e.width;
                if (e.width === e.naturalHeight)
                    return e.width;
                if (Math.abs(e.width - e.naturalWidth) < 2)
                    return e.naturalWidth;
                if (Math.abs(e.width - e.naturalHeight) < 2)
                    return e.naturalHeight;
                throw new Error("Unexpected image dimensions during normalization")

Thanks!


Solution

  • The issue turned out to be related to the css styling that was being applied to the canvas portion of my site that was loading the labeling tools.