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

Ala*_*air 6 javascript html5 base64 modernizr data-uri

我正在使用Modernizr来检测用户正在运行的浏览器支持的功能,到目前为止一切顺利.但在测试base64兼容性时,我遇到了理论上的问题.这个支持的补丁在这里详细介绍,并且可以工作 - 除了IE8的奇怪情况 - 它只允许最高32KB的base64编码图像.

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

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

Ala*_*air 3

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

    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 = "\r\n" + base64str;
    }

    b64test.src= "data:image/gif;base64," + base64str;
Run Code Online (Sandbox Code Playgroud)

在 IE8 中失败,在 IE9 和其他浏览器中工作。不过,我很想听到任何替代方案。