扩展页面图片转Base64方案遇TypeError，求技术排查解决

错误原因拆解 #

• images.src is undefined：images是getElementsByTagName返回的HTMLCollection集合，要访问单个图片元素的src属性，应该用images[i].src，而非images.src[i]——后者是在集合本身查找src属性，显然不存在。
• callback is not a function：调用toDataURL时仅传入了图片URL，未传递回调函数，但原函数逻辑依赖回调接收Base64结果，因此触发类型错误。
• 异步逻辑问题：toDataURL是异步操作（XMLHttpRequest请求），直接将其调用结果push到数组中拿到的是undefined，且请求未完成就尝试赋值，根本无法获取Base64数据。

修正后的代码 #

基于回调的版本 #

document.addEventListener('DOMContentLoaded', function() {
    var images = document.getElementsByTagName('img');
    for(var i = 0; i < images.length; i++) {
        // 保存当前图片元素引用，避免循环闭包问题
        var img = images[i];
        toDataURL(img.src, function(base64Data) {
            // 请求完成后替换图片src
            img.src = base64Data;
        });
    } 
}, false);

function toDataURL(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    // 新增请求失败处理
    xhr.onerror = function() {
        console.error('加载图片失败:', url);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

现代Promise/async-await版本（逻辑更清晰） #

document.addEventListener('DOMContentLoaded', async function() {
    var images = document.getElementsByTagName('img');
    for(var i = 0; i < images.length; i++) {
        var img = images[i];
        try {
            var base64Data = await toDataURL(img.src);
            img.src = base64Data;
        } catch (err) {
            console.error('处理图片失败:', img.src, err);
        }
    } 
}, false);

function toDataURL(url) {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            var reader = new FileReader();
            reader.onloadend = function() {
                resolve(reader.result);
            }
            reader.onerror = reject;
            reader.readAsDataURL(xhr.response);
        };
        xhr.onerror = reject;
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
    });
}

额外注意事项 #

• 跨域限制：若图片来自其他域名，需目标服务器配置CORS允许当前域名访问，否则XMLHttpRequest会报错。
• 性能影响：将所有图片转成Base64会增大页面体积，可能拖慢初始加载速度，建议仅对小图片执行此操作。

内容的提问来源于stack exchange，提问作者Anonworriedworker