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

aapavlov1994 commented 2 years ago

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 commented 2 years ago

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

chase-moskal commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

chase-moskal commented 2 years ago

@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 webp-hero@0.0.2 :+1:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
-  <script src="https://unpkg.com/webp-hero@0.0.0-dev.27/dist-cjs/polyfills.js"></script>
-  <script src="https://unpkg.com/webp-hero@0.0.0-dev.27/dist-cjs/webp-hero.bundle.js"></script>
+  <script src="https://unpkg.com/webp-hero@0.0.2/dist-cjs/polyfills.js"></script>
+  <script src="https://unpkg.com/webp-hero@0.0.2/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 :man_shrugging:

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

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

aapavlov1994 commented 2 years ago

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 commented 2 years ago

@aapavlov1994 i've noticed a couple of issues.

your example data uri images are actually in png format, data:image/png;base64,iVBO[...].
webp-hero only decodes webp images.
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 commented 2 years ago

@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

chase-moskal / webp-hero

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