Replacing all images from URL by base64 images

Question

Wanted to expand the solution of https://stackoverflow.com/a/20285053/3891356 to process all the images in a page and make them base64, but I think I have a scope or visibility problem. Method toDataURL can be seen on the previous link. I tested in isolation and it works.

   document.addEventListener('DOMContentLoaded', function() {
        var images = document.getElementsByTagName('img');
        var imageArray = [];
        for(var i = 0; i < images.length; i++) {
            imageArray.push(toDataURL(images[i].src));
            images.src[i] = imageArray[i];
        } 
    }, 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.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
    }

Console log is

Uncaught TypeError: images.src is undefined

and

Uncaught TypeError: callback is not a function

Maybe the problem is that push() takes some time (since toDataURL is making a request) and this means I can't assign to images.src?

Much thanks.

Are you sure you are using a version of toDataUrl that returns a promise? Otherwise you should do `imageArray.push(toDataUrl(images[i].src))` — sorold, Jul 28 '22 at 15:45
@sorold, I edit the code to show it in completion + simplification. Thanks — Anonworriedworker, Jul 28 '22 at 15:52
You defined toDataURL but is calling toDataUrl. You have to change the case of url when you call to match the definition — sorold, Jul 28 '22 at 16:21

Replacing all images from URL by base64 images

0 Answers0