Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Calling createImageBitmap with non-typed Blob causing InvalidStateError #28723

Open
chirsz-ever opened this issue Apr 3, 2025 · 2 comments · May be fixed by #28741
Open

Calling createImageBitmap with non-typed Blob causing InvalidStateError #28723

chirsz-ever opened this issue Apr 3, 2025 · 2 comments · May be fixed by #28741

Comments

@chirsz-ever
Copy link
Contributor

chirsz-ever commented Apr 3, 2025 •
edited
Loading

This issue is not duplicate of #25971.

At current time (Deno 2.2.6), calling createImageBitmap with a Blob object that has a empty type would trigger this error:

InvalidStateError: The MIME type of source image is not specified

hint: When you want to get a "Blob" from "fetch", make sure to go through a file server that returns the appropriate content-type response header,
      and specify the URL to the file server like "await(await fetch('http://localhost:8000/sample.png').blob()".
      Alternatively, if you are reading a local file using 'Deno.readFile' etc.,
      set the appropriate MIME type like "new Blob([await Deno.readFile('sample.png')], { type: 'image/png' })".

But browser implementations seem to support automatic detection of image types. There is a demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script>
        // from https://github.com/web-platform-tests/wpt/blob/ea49709e5880c8133249d919c72d67798afc31ec/html/canvas/element/manual/imagebitmap/createImageBitmap-blob-invalidtype.html
        window.onload = () => {
            // Source: https://commons.wikimedia.org/wiki/File:1x1.png (Public Domain)
            const IMAGE = atob("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAA" +
                "ACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=");

            let bytes = new Uint8Array(IMAGE.length);
            for (let i = 0; i < IMAGE.length; i++) {
                bytes[i] = IMAGE.charCodeAt(i);
            }

            const output = document.getElementById("output");
            const log = (msg) => {
                output.appendChild(document.createTextNode(msg));
                output.appendChild(document.createElement("br"));
            }

            for (const ctype of ["image/png", "", "text/html", "image/jpeg"]) {
                let blob = new Blob([bytes], { type: ctype });

                window.createImageBitmap(blob)
                    .then(img => {
                        log(`createImageBitmap(blob) with type "${ctype}": width: ${img.width}, height: ${img.height}`);
                    })
                    .catch(e => {
                        log(`createImageBitmap(blob) with type "${ctype}" failed: ${e}`);
                    });
            }
        }
    </script>
</head>

<body>
    <p>Test for <code>createImageBitmap</code> with invalid type.</p>
    <hr>
    <div id="output"></div>
</body>

</html>

We can find that for the non-typed Blob, createImageBitmap returns the correct result. I tested on Chrome and Safari on a MacBook, and Firefox and vivaldi on Linux, and they both works.

The WHATWG standard does not mention what to do when the type of Blob is empty1.

Should Deno also support to detect the image type automatically?

@Hajime-san @crowlKats @littledivy

Footnotes

  1. https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap ↩
@Hajime-san
Copy link
Contributor

Thanks for reporting!

The spec said that like below.

Blob
Run these steps in parallel:
...
Apply the image sniffing rules to determine the file format of imageData, with MIME type of image (as given by image's type attribute) giving the official type.

BTW I found a interesting wpt test, that was integrated by this PR.

So, I think that we should also ignore the value of Blob.type attribute and use just mime type sniffing from the binary.

@chirsz-ever
Copy link
Contributor Author

I read the links. This is a classic case of de facto implementations replacing standards.

The bitmap should have been created. View the demo in Chrome/Safari for the correct result.1

Footnotes

  1. https://bugzilla.mozilla.org/show_bug.cgi?id=1497925#c0 ↩

@Hajime-san Hajime-san linked a pull request Apr 4, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(ext/canvas): createImageBitmap must ignore the Blob.type value Hajime-san/deno
2 participants
@chirsz-ever @Hajime-san