Error 'Frame 2 has a different width' since Chrome version 108

[xuejianxianzun]

Images that used to work fine now fail to convert with this error:

The size of each frame image is wrong.

I found the reason, since this project seems to be unmaintained, I didn't submit a PR, but as an issue, so that more people who encounter this error can see it.

var p2 = str.substr(577)
// change into
var p2 = str.substr(ChromeVer >= 108 ? 497 : 577)

Since Chrome 108 the 80-byte whitespace is removed, so the offset of the second part is 577 - 80 = 497.

I added code to detect ChromeVer before this.encodeFrames:

    let ChromeVer = 1
    const test = navigator.appVersion.match(/.*Chrome\/([0-9]+)/)
    if(test && test[1]){
      ChromeVer = parseInt(test[1])
    }

[xuejianxianzun]

Use canvas.toDataURL('image/webp') to convert the same image and save it as a webp image.

Edge(107) has 80 bytes of 0:

Chrome (108) removed these bytes, resulting in a conversion error.