js 图片转pdf

// 使用 jsPDF 库将图片转换为 PDF
// 首先需要引入 jsPDF 和 html2canvas 库
// 可以通过 CDN 或 npm 安装

// CDN 引入
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

// npm 安装
// npm install jspdf html2canvas

async function imageToPdf(imageUrl) {
    // 创建一个新的 jsPDF 实例
    const { jsPDF } = window.jspdf;
    const pdf = new jsPDF();

    // 使用 html2canvas 将图片转为 canvas
    const img = new Image();
    img.src = imageUrl;
    await new Promise(resolve => (img.onload = resolve));

    // 获取图片的宽度和高度
    const imgWidth = img.width;
    const imgHeight = img.height;

    // 设置 PDF 页面的宽度和高度
    let width = pdf.internal.pageSize.getWidth();
    let height = (imgHeight * width) / imgWidth;

    // 添加图片到 PDF
    pdf.addImage(img, 'JPEG', 0, 0, width, height);

    // 保存 PDF 文件
    pdf.save('image-to-pdf.pdf');
}

// 示例调用
imageToPdf('https://example.com/path/to/image.jpg');

解释说明：

1. 引入库：首先需要引入 jsPDF 和 html2canvas 库，可以通过 CDN 或 npm 安装。
2. 创建 jsPDF 实例：使用 jsPDF 创建一个新的 PDF 文档实例。
3. 加载图片：通过 Image() 对象加载指定的图片，并等待图片加载完成。
4. 计算尺寸：根据图片的宽高比，计算出适合 PDF 页面的尺寸。
5. 添加图片到 PDF：使用 addImage 方法将图片添加到 PDF 中。
6. 保存 PDF：最后调用 save 方法保存生成的 PDF 文件。

如果需要进一步调整页面布局或其他功能，可以根据需求修改代码。