JSFiddle - React, Tailwind, and code Playground

by aminadarwish

HTML

<html>
<meta charset="utf-8" />

<body>

    <div style='font-size:30px'>
        <button style='font-size:50px' onclick="jsPDFimages()">create pdf</button>
    </div>
</body>

</html>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>

<script>
    // , 'img2': 'https://www.pexels.com/photo/pink-peace-light-sign-752473/'
    const doc = new jsPDF();
    const imagesWidth = []
    const imgDataList = []
    const img = new Image();
    // const imagesList = { 'imag1': 'https://crm-commercial.web.app/img/nowlogox.68c6e596.png' }

    const imagesList = { 'imag1': 'https://as2.ftcdn.net/jpg/00/42/98/87/500_F_42988762_JMNpHWOFWnbtCBZeYsRo5PmzD28rIquS.jpg', 'image2': 'https://as2.ftcdn.net/jpg/00/42/98/87/500_F_42988762_JMNpHWOFWnbtCBZeYsRo5PmzD28rIquS.jpg' }

    var ImageToLoad = new Image();
    jsPDFimages()

    function getImageFromUrl(url, callback) {

        ImageToLoad.crossOrigin = "Anonymous";

        ImageToLoad.onError = function () {
            console.log('Cannot load image: "' + url + '"');
        };

        ImageToLoad.onload = function () {
            alert("image is loaded");
        }

        ImageToLoad.onload = function () {
            imagesWidth.push({
                width: ImageToLoad.width,
                height: ImageToLoad.height
            })
            callback(ImageToLoad);
        };
        ImageToLoad.src = url;
        createPDF(ImageToLoad)
    }



    function createPDF(imgData) {
        imgDataList.push(imgData)
        // Rotate Image angle: -20,
        var pwidth = doc.internal.pageSize.getWidth();
        var pheight = doc.internal.pageSize.getHeight();
        var maxWidth = pwidth - 40; // Max width for the image
        var maxHeight = pheight - 40;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = imgData.width;    // Current image width
        var height = imgData.height;  // Current image height
        // Check if the current width...