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.

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

[BUG][WebpMachine][decode] Cannt decode base64 asset #46

Open
aapavlov1994 opened this issue Feb 28, 2022 · 8 comments
Open

[BUG][WebpMachine][decode] Cannt decode base64 asset #46

aapavlov1994 opened this issue Feb 28, 2022 · 8 comments
Labels

Comments

@aapavlov1994
Copy link

Sometimes WebpMachine cannt decode base64 webp assets and i cannt understand the reasons
Example base64 asset can be found in zip file bellow

WM.decode(convertDataURIToBinary(example)) // error

example.zip

@aapavlov1994
Copy link
Author

aapavlov1994 commented Feb 28, 2022

But if you repeat few times you will succeed

const bin = convertDataURIToBinary(exampleBase64);

const run = (count) => {
  if (count === 0) {
    console.log('end');
    return;
  }
  WM.decode(bin).then(
    () => {
      console.log('success');
    },
    () => {
      console.log('error');
      run(count - 1);
    },
  );
};

run(10);

output

image

@chase-moskal
Copy link
Owner

chase-moskal commented Feb 28, 2022

this is an interesting bug, thanks for filing it. hopefully we can figure this out and apply a fix soon.

do you have a particular webp data uri that you can share, that we can experiment with?

edit: oh, i see you've attached a .zip file, i should be able to take a look at this tomorrow.

which browser are you using that you're finding this issue?

@aapavlov1994
Copy link
Author

I found this bug in IOS Safari 13.3 (there is no native webp support).
Also you can find this bug in new chrome builds (98.0.4758.102 mine).

I have builded simple demo for you
demo.zip

@aapavlov1994
Copy link
Author

I have strarted use webpMachine after window.onload - works well

@chase-moskal
Copy link
Owner

@aapavlov1994 hello, i believe i may have found the problem.

data uri's are only supported as of v0.0.2, so you just need to upgrade to [email protected] 👍

<head>
  <meta charset="UTF-8">
  <title>Title</title>
-  <script src="https://unpkg.com/[email protected]/dist-cjs/polyfills.js"></script>
-  <script src="https://unpkg.com/[email protected]/dist-cjs/webp-hero.bundle.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist-cjs/polyfills.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist-cjs/webp-hero.bundle.js"></script>
  <script src="./example.js"></script>
  <script src="./testWebp.js"></script>
</head>

i reproduced the problem locally, and i do not understand the mechanics about why you first receive an error, and then receive a success.. anyways, upgrading to v0.0.2 seems to resolve this issue 🤷‍♂️

i noticed the readme was outdated, showing v0.0.1 in the examples, so i've now fixed that in 0b66258

please let me know if this solution works for you, cheers 🍻

@aapavlov1994
Copy link
Author

Yes, this fix truly cured demo!
But in real case it didnt.. (in real case i use webpack + webp-hero as npm package)

So i builded new demo (need localhost for running and installing package)

webp-test.zip

@chase-moskal
Copy link
Owner

chase-moskal commented Mar 1, 2022

@aapavlov1994 i've noticed a couple of issues.

  1. your example data uri images are actually in png format, data:image/png;base64,iVBO[...].
    webp-hero only decodes webp images.
  2. i noticed your code is unpacking the data out of the data uri, and passing it to decode.
    you may want to consider using functions like polyfillImage, which handles the data-uri logic for you, unpacking the binary data from a data uri

@aapavlov1994
Copy link
Author

@chase-moskal

  1. Yes, sorry for wrong png assets. Attached new ones in webp format
  2. May be.. But under the hood this is identical way, isnt it? I imported yours base64toBinaryConvarter now.

webp-test.zip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants