Error loading image for billboard: InvalidStateError: The source image could not be decoded.

[tangtony]

Billboards loaded via a data-uri seem to have stopped working in Cesium v1.56.

Sandcastle example:
v1.55 (Working):
https://cesiumjs.org/releases/1.55/Apps/Sandcastle/index.html#c=ZVHLbsIwEPwVKxdABTs0ICgNUSV6rNRDpZ5yceIlsXBsZJsEWvHvXROo+vBpZrwz61233JJWQgeWrImGjmzAyUND3y/acFBe6MZoz6UGOxg95jrXvYOC9tJLcJQLMfzMNcGzNw41o8nqFrXh1iPiOqFba5pnqCyAG04Wczp/WCwWYzKLaZwsl8lo3GcUUqnCcCvI6poajmx4BRg7ENzz1YUx11Z3x0aNUwSkBeuw8zqPpnSaRwQvtENWe79fMdZ1He0SamzF7uM4Dl4s6qTwdbDEMbIaZFX7G83SUtpSASmPKM1DQXm6IYtgFoDz1uwAWaF4ufsWJrfkBKUtToTQgsgjlqWhdzboRzvn+hy2Go2j1PmTgqzXn2SzN9aTg1VDSpmHZq84LpIVh3IHnpbOBRtmXU2pkC2RAtv8+bTwbMVdWMX2oNSb/IAwG8P6XzZluJC6esU9Kn4KJfU0e+lFSmnKkP53eWNUwe2PxC8

v1.56 (Not working): https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=ZVHLbsIwEPwVKxdABTs0ICgNUSV6rNRDpZ5yceIlsXBsZJsEWvHvXROo+vBpZrwz61233JJWQgeWrImGjmzAyUND3y/acFBe6MZoz6UGOxg95jrXvYOC9tJLcJQLMfzMNcGzNw41o8nqFrXh1iPiOqFba5pnqCyAG04Wczp/WCwWYzKLaZwsl8lo3GcUUqnCcCvI6poajmx4BRg7ENzz1YUx11Z3x0aNUwSkBeuw8zqPpnSaRwQvtENWe79fMdZ1He0SamzF7uM4Dl4s6qTwdbDEMbIaZFX7G83SUtpSASmPKM1DQXm6IYtgFoDz1uwAWaF4ufsWJrfkBKUtToTQgsgjlqWhdzboRzvn+hy2Go2j1PmTgqzXn2SzN9aTg1VDSpmHZq84LpIVh3IHnpbOBRtmXU2pkC2RAtv8+bTwbMVdWMX2oNSb/IAwG8P6XzZluJC6esU9Kn4KJfU0e+lFSmnKkP53eWNUwe2PxC8

Browser: Google Chrome 73.0.3683.86

Operating System: Windows 10, 64-bit

[hpinkos]

Thanks for reporting this @tangtony! We'll look into this and get it fixed for the next release

[hpinkos]

@OmarShehata are you the best one to take a look at this?

[OmarShehata]

Yeah, I know why this is happening. It's because of the switch to using createImageBitmap:

#7579

You can confirm this by overriding the supports bitmap check to disable it at the top of your Sandcastle:

Cesium.Resource.supportsImageBitmapOptions = function(){
    return Cesium.when.resolve(false);
};

[OmarShehata]

The good news is that data URIs in general should work fine with createImageBitmap. I think we need to handle SVG by wrapping it in an SVGImageElement before passing it to createImageBitmap.

[OmarShehata]

We do intentionally fetch the given image as a blob before decoding it, since that allows the browser to move the expensive decode off the main thread. It looks like browsers don't support decoding vector data as a blob. From the spec:

If imageData is not in a supported image file format (e.g., it's not an image at all), or if imageData is corrupted in some fatal way such that the image dimensions cannot be obtained (e.g., a vector graphic with no intrinsic size), then reject p with an "InvalidStateError" DOMException and abort these steps.

Another workaround is to wrap the data URI in an image element before passing it in in your application:

var viewer = new Cesium.Viewer('cesiumContainer');

var img = document.createElement('img');
img.src = 'data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>';

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard :{
        image : img
    }
});

I think the right fix is to essentially have Resource do this when it takes a vector image type. I wonder if we need to check for anything else other than just svg+xml ?

[lilleyse]

Fixed in #7701 and published a 1.56.1 release with the fix: https://github.com/AnalyticalGraphicsInc/cesium/releases/tag/1.56.1