dgabriel.github.io/image2pdf.html at master · dgabriel/dgabriel.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image to PDF Converter</title>
    <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>
    <link rel="stylesheet" href="claude.css">
    <style>
        input[type="file"] {
            margin-bottom: 10px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .action {
            padding: 20px;
            border: 1px solid #666;
            background: white;
            margin: 20px 0;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<h1>Image to PDF Converter</h1>
<h2>100% free and anonymous</h2>
<p>
    Inspired by a mathematics class at Harvard Extension school that
    required students to upload a pdf of completed homework.  Most people
    downloaded a freemium phone app to do that, eventually accidentally paying 9.99 a month
    when they forgot to end the trial.  I wrote a python script that no one else
    in my study group had the skill to use.
</p>
<div class="action">
    <b>Upload your image</b><br/>
        <input type="file" id="imageInput" accept="image/jpeg, image/png, image/gif" />
        <button id="convertBtn">Convert to PDF</button>
</div>
<p>This tool was created with <a href="https://www.deepseek.com/" target="_blank">DeepSeek</a> using the following prompt:<br/>
    <code>Please build a tool in html and javascript that can be hosted on github pages that turns an image (jpeg, gif, or png) into a pdf file.
        Please combine the html and javascript in a single file.</code>
</p>
<i>View source and steal this code!  No rights reserved.</i>
<footer>
    <p><a href="index.html">Dawn Gabriel on GitHub (dgabriel.github.io)</a></p>
</footer>
<script>
    // Ensure jsPDF is available in the global scope
    window.jsPDF = window.jspdf.jsPDF;

    document.getElementById('convertBtn').addEventListener('click', function() {
        const fileInput = document.getElementById('imageInput');
        if (fileInput.files.length === 0) {
            alert('Please select an image file.');
            return;
        }

        const file = fileInput.files[0];
        const reader = new FileReader();

        reader.onload = function(event) {
            const img = new Image();
            img.src = event.target.result;

            img.onload = function() {
                const pdf = new jsPDF();
                const width = pdf.internal.pageSize.getWidth();
                const height = pdf.internal.pageSize.getHeight();

                // Calculate aspect ratio to fit the image within the PDF page
                const aspectRatio = img.width / img.height;
                let imgWidth = width;
                let imgHeight = width / aspectRatio;

                if (imgHeight > height) {
                    imgHeight = height;
                    imgWidth = height * aspectRatio;
                }

                // Add image to PDF
                pdf.addImage(img, 'JPEG', (width - imgWidth) / 2, (height - imgHeight) / 2, imgWidth, imgHeight);
                pdf.save('converted.pdf');
            };
        };

        reader.readAsDataURL(file);
    });
</script>
</body>
</html>