'atob' on 'Window' encoding problem on server (digital ocean forge) but not locally (laravel valet)?

I am using jquery to select all image urls from all img-tags with the class .my-images

Then I am trying to put them in to a pdf bundle file with jsPDF. Like this:

//Creating the PDF
var doc = new jsPDF()

//Getting all the images
var images = $('.my-images').map(function(){
    return this.src;
}).get();

//Looping through the images and adding a page for each
var iterations = 1;
images.forEach(function(element) {
    if(iterations > 1){
        doc.addPage();
    }
    console.log(element);
    doc.addImage(element, 'image/png', 10, 10, 190, 277);
    iterations = ++iterations;
});

doc.save('a4.pdf')

So now to my problem. Locally where I use laravel-valet, everything works just fine! Really good even.

But when I push it up to the server I get:

Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

I have read up a bit on it and tried atob and btoa but then it immediately breaks locally... I have found no other reports about this strange behaviour. Any ideas on how to proceed?

theFinalArbiter

7 years ago

Level 7

after hours and hours... I don't really know what the problem was exactley... but I do know the answer. Instead of adding just the URL straight from the DOM-selection you need to instantiate the Image class. like this:

//Creating the PDF
var doc = new jsPDF()

//Getting all the images
var images = $('.my-images').map(function(){
    return this.src;
}).get();

//Looping through the images and adding a page for each
var iterations = 1;
images.forEach(function(element) {
    if(iterations > 1){
        doc.addPage();
    }

    var img = new Image();
    //Then just add the url as a attribute
    img.src = element;

    //THEN add the image to the pdf
    doc.addImage(img, 'image/png', 10, 10, 190, 277);
    
    iterations = ++iterations;
});

doc.save('a4.pdf')

BOOM and you got it there. I suppose some encoding that the jsPDF likes is happening when you add it to the Image class.

Please or to participate in this conversation.