对 base64 URI 支持的更好测试(我可以在 JS 中创建一个大的 base64 编码图像吗?)

2022-01-21 00:00:00 base64 data-uri javascript html modernizr

我正在使用 Modernizr 来检测我们的用户正在运行的浏览器支持的功能，到目前为止一切都很好.但是在测试 base64 兼容性时，我遇到了一个理论问题.此支持的补丁在这里有详细说明，并且有效——除了一个奇怪的 IE8 案例- 它只允许最大 32KB 的 base64 编码图像.

I'm using Modernizr to detect the features supported in the browser our users are running, so far so good. But I've come up against a theoretical problem when testing for base64 compatibility. The patch for this support is detailed here, and works- except for a weird case with IE8- it only allows base64 encoded images of up to 32KB.

我真的不想在我的 JS 文件中嵌入一个 32KB 长的 base64 字符串，它会增加大量的膨胀.那么，我可以使用 JS 创建一个 32KB 的有效图像吗?我正在考虑在字符串中重复某种模式，直到它达到 32KB 的长度，诸如此类.或者，可能采用现有的小字符串(如 Modernizr 补丁中的那个)并在末尾添加垃圾数据，这仍然会产生有效的图像.

I don't really want to embed a 32KB long base64 string inside my JS file, it'll add a crazy amount of bloat. So, could I create a 32KB- valid- image using JS? I'm thinking repeating some kind of pattern within a string until it reaches 32KB in length, that sort of thing. Or maybe taking an existing tiny string (like the one in the Modernizr patch) and adding junk data at the end that still results in a valid image.

除了如何操作现有图像之外，我对 base64 编码几乎一无所知.有人有什么想法吗?

I know next to nothing about base64 encoding, other than how to manipulate an existing image. Does anyone have any ideas?

推荐答案

我认为我有一个答案.我尝试了各种技术(我可以手动添加的 PNG 源代码中的重复文本块等)，直到我发现添加换行符似乎可以完成这项工作:

I think I have an answer. I tried all sorts of techniques (repeated text chunks in the PNG source that I could manually add, etc) until I found that adding line breaks appears to do the job:

    var b64test = new Image();
    b64test.onload = function() {
       alert("yay!")
    }

    b64test.onerror = function() {
       alert("boo")
    }

    /* A 1x1 GIF image */

    var base64str = "R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
    while (base64str.length < 33000) {
        base64str = "
" + base64str;
    }

    b64test.src= "data:image/gif;base64," + base64str;

在 IE8 中失败，在 IE9 和其他版本中有效.不过，我很想听听任何替代方案.

Fails in IE8, works in IE9 and others. I'd love to hear any alternatives, though.

相关文章