PolyfillImage produces gif, instead of png on iOS < 14

[djlastnight]

Hi there. It might be me, but I get gif image output instead of png

Here's the code, which I wrote for tests

// How I imported it
import { WebpMachine } from "webp-hero/dist-cjs/index.js";
...
// How I initialize it at GameLoader's constructor
this.webp = new WebpMachine({useCanvasElements: false, webpSupport: false});
...
// On each resource load, I am adding new img to the body for test only
    private async onAfterResourceLoaded(resource: PIXI.LoaderResource, next: (...args: any[]) => void, loader: GameLoader) {
        if (resource.extension == "webp") {
                let image = resource.data as HTMLImageElement;
                await loader.webp.polyfillImage(image);
                image.width = 100;
                image.height = 100;
                if (!image.src.endsWith("webp")) {
                    // Conversion was made by webp-hero
                    image.style.cssText = "position: fixed; left: 0px; top:50px; width: 100px; height: 100px";
                    document.body.appendChild(image);
                }
        }
        
        next();
    }

On iOS 14 and 15 I can see the png images rendered as they should. At iOS 13 and lower I can not see anything and the img is gif.
Please note all the images has the same src.

npm list webp-hero returns webp-hero@0.0.2
Any help appriciated.
Thx in advance.

[chase-moskal]

@djlastnight thanks for this bug report! i may not be able to really dig into this until next week, but i have some quick thoughts.

i wonder if the problem might be fixed in webp-machine.ts decode by simply specifying image/png in the canvas.toDataURL() call:

-return canvas.toDataURL()
+return canvas.toDataURL("image/png")

another consideration: you may instead want to try specifying useCanvasElements: true, which should entirely circumvent this toDataURL call. this option's default value is calculated using the detect-canvas-reading-support function — perhaps you could write an alternative function which looks for the appearance of image/gif when canvas.toDataURL("image/png") is requested, and use that as a cue that canvas reading support isn't working, thus then enabling useCanvasElements as a workaround for these older ios devices.

whatever turns out to be the best solution, we would like to integrate it into the next webp-hero release, so that webp-hero works out-of-the-box on as many devices as possible.

🍻

[djlastnight]

Thanks for the reply. Using useCanvasElements: true is not an option for me, because I am using pixi, not pure html. The code above (which uses html) is only a concept proof one. My final goal is to get the image converted by webp-hero and to replace pixi's image on the fly, which I hope won't requre too much ram. That's why I am using the polyfillImage method, instead of decode method directly.

Yesterday I wrote a complete automated fallback system, which generates both WebP and png assets, so if the WebP is not supported by the browser, we simply load pngs for our games.
By the way I am using similar code like yours source/detect-webp-support.ts

Here it is:

enum WebPFeature {
    Lossy = "lossy",
    Lossless = "lossless",
    Alpha = "alpha",
    Animation = "animation"
}

    /**
     * Detects whether the WebP image format is supported by the browser.
     *
     * @private
     * @param {*} feature can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
     * @param {*} callback callback(feature, isSupported)' will be passed back the detection result (in an asynchronous way!)
     * @memberof GameLoader
     */
    private checkWebpFeature(feature: WebPFeature, callback: (feature: WebPFeature, isSupported: boolean) => void) {
        const kTestImages = {
            lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
            lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
            alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
            animation:
                "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA",
        };

        const img = new Image();
        img.onload = function () {
            const result = img.width > 0 && img.height > 0;
            callback(feature, result);
        };

        img.onerror = function () {
            callback(feature, false);
        };

        img.src = "data:image/webp;base64," + kTestImages[feature];
    }

// Here is how to check for support:
        for (const key in WebPFeature) {
            this.checkWebpFeature(WebPFeature[key], (feature: WebPFeature, isSupported: boolean) => {
                if (!isSupported) {
                    this.useFallbackAssets = true;
                }
    
                console.log(`WebP (${feature}) supported: ${isSupported}`);
            });
        }

It can be easily converted to async method if needed (I am calling this at the constructor, that's why I need callback).

Anyways I will give a try what would happen, when I force the "image/png" decoding and I will update this post.

[chase-moskal]

awesome, very cool!

we'll keep this issue open, hopefully i can reproduce the problem (also on browserstack) when i have some spare cycles, and i can implement a fix to improve webp hero compatibility for this issue 👍