Javascript 图片及；PDFMake

我目前正在使用pdfmake生成项目报告pdf的给定信息，在获取图像显示时遇到一些问题

我有一个生成pdfmake“object”的函数，如下所示：

function singleProject(data) {
    return {
        text: "Project: \n" + data.title + \n\nImage: \n",
        pageBreak: 'before'
    }
}

我想在给定图像URL（类似于“images/sample_image.jpg”）的情况下，向该报告添加一个图像，根据我在其他答案上读到的内容，我必须将其转换为base 64格式

在另一个答案中提供了其中一个功能，但我不太清楚应该如何使用它：

function convertImgToBase64URL(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var dataURL;
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null;
    };
    img.src = url;
}

但是，我不太确定如何使用这个函数将图像添加到提供的第一个函数中，因为它不会返回dataURL；如果我尝试以下方法：

function singleProject(data) {
    return {
        text: "Project: \n" + data.title + \n\nImage: \n",
        image: convertImgToBase64URL(data.image), //data.image is the URL so something like "images/sample_image.jpg"
        width: 300,
        pageBreak: 'before'
    }
}

图像不显示。

使用隐藏

<img id='imgToExport' src='someimageurl' style='display:none'/> 

---

通过这种方式，您不需要异步调用

读取-我正在执行什么异步操作？DataURL转换（这就是为什么如果我尝试返回它，它会返回null结果）？我对它有点费劲，所以一些解释会很好

convertImgToBase64URL

是一个异步函数。请注意，函数的完成发生在

img.onload

内部，该函数在

convertImgToBase64URL

返回后调用。您需要提供一个回调函数作为第二个参数，它将被传递到dataURL，然后您可以使用它。很有趣，谢谢。那么，在这种情况下，回调函数是什么呢？在图像创建回调成功后创建pdf文档谢谢，这看起来非常简单。在我的例子中，我想动态生成32个小图像。是否可以在for循环中使用此代码？此外，uri数据的大小是否取决于画布图像的维度或原始资源？与Thailandian一样，我正在尝试为循环中的一组图像生成一个64base（有没有一种方法不需要ID而只需使用URL？）。我不知道异步部分是否已修复，因为我记录了数据URL，并在pdf生成后记录（添加了一个return语句以在我的个人代码中返回数据URL）。

var imgToExport = document.getElementById('imgToExport');
var canvas = document.createElement('canvas');
        canvas.width = imgToExport.width; 
        canvas.height = imgToExport.height; 
        canvas.getContext('2d').drawImage(imgToExport, 0, 0);
  canvas.toDataURL('image/png')