javascript - 为什么 'atob' on 'Window' 编码问题在服务器上而不是本地(laravel valet)？

Question

我使用 jquery 从所有具有 .my-images 类的 img 标签中选择所有图像 url

然后我尝试使用 jsPDF 将它们放入 pdf 捆绑文件中。像这样:

//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')

现在我的问题来了。在我使用 laravel-valet 的本地，一切正常!真的很好。

但是当我将其推送到服务器时，我得到:

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

我已经阅读了一些内容并尝试了 atob and btoa但随后它立即在本地中断......我没有发现有关这种奇怪行为的其他报告。关于如何进行的任何想法？

Answer 1

几个小时后...我真的不知道问题到底是什么...但我确实知道答案。您需要实例化 Image 类，而不是直接从 DOM 选择添加 URL。像这样:

//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，你就成功了。我想当您将 jsPDF 添加到 Image 类时，会发生一些 jsPDF 喜欢的编码。