在javascript (客户端)中处理许多base64编码的图像的实用方法？

Question

我正在建立一个网站，允许用户下载个性化的pdf。我正在尝试使用jspdf或pdfkit的javascript库来生成pdf。这两个库都不能使用路径在浏览器中包含图像。他们需要一个base64编码的数据URI。不幸的是，我不得不加入很多图片。这些图像存储在服务器上。

我在想办法处理这件事。我在考虑对所有图像进行批量编码，并将相应的字符串存储在一个json文件中，然后在需要插入图像时读取该文件。我不能手动执行此操作，因为即使是一个字符串也会阻塞我的编辑器。我也不能将编码的字符串存储在数据库中，因为我没有数据库。

我知道这个问题的框架不是很精确。欢迎提出改进建议。

Answer 1

有几种方法可以做到这一点，我能想到的最直接的方法是从文件输入的onchange事件创建一个base64字符串，并将文件传递给HTML Filereader api的onload事件。

html

<input type="file" onchange="selectFile(this.value)">

javascript

selectFile(event: Event | any) {
    if (event.target.files && event.target.files[0]) {
        const reader = new FileReader();

        reader.onload = (event: ProgressEvent) => {
            this.file = event.target.result;
        }
        reader.readAsDataURL(event.target.files[0]);
    }
}

然后将this.file传递给您的api，或者直接从reader.onload调用您的api。