Question

How to get all images from a specific website and replace them with base64 encodings?
Server-side solutions would work.
like:

var img = document.querySelectorAll("img");
for (var i = 0; i < img.length; i++) {
    //replace with base64 encoding
}

Why: I wanted to create an e-book (mobi) based on a RSS feed. I already converted the content to HTML but the images need to be local for display. Replacing the images base64 looked like the best solution.

Answer 1

Something like this:

jQuery + canvas:

$("img").load(function(i) {
    var $this = $(this),
        jCanvas = $("<canvas width='" + $this.width() + "' height='" + $this.height() + "'/>"),
        oCanvas = jCanvas[0];

    oCanvas.getContext("2d").drawImage(this, 0, 0);

    this.src = oCanvas.toDataURL();
});

But this will only work if the image is on the same domain as the script.

Demo: http://jsfiddle.net/K5RY3/3/