使用 jspdf 将图像 url 转换为 pdf答案

【问题标题】：Convert a image url to pdf using jspdf使用 jspdf 将图像 url 转换为 pdf
【发布时间】：2014-09-14 17:28:35
【问题描述】：

function convertImgToBase64(url)
{
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    img = document.createElement('img'),
    img.src = url;
    canvas.height = img.height;
    canvas.width = img.width;
    var dataURL = canvas.toDataURL('image/jpeg')
    alert(dataURL);
    canvas = null; 
    return dataURL;
  }

var imageurl = 'http://qph.is.quoracdn.net/main-qimg-ca033a73e2ea858908c44905d4c25f4b?convert_to_webp=true';
var som =convertImgToBase64(imageurl);
doc.addImage(som, 'JPEG', 15, 40, 180, 180);
doc.output('datauristring');

但是什么都没有发生没有生成pdf？我在警告框中得到了正确的 base64 代码，但没有生成图像？

【问题讨论】：

任何人都可以做小提琴演示
第 9 行缺少分号。jsBin - jsbin.com/bodehabi/1/edit
但是没有生成pdf？
image to base64 conversion的可能重复
github.com/MrRio/jsPDF/issues/317

标签： javascript html google-chrome-extension pdf-generation jspdf

【解决方案1】：

我创建了以下示例：open in fiddle

<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>
    var imagesList 
    const doc = new jsPDF();
    const imagesWidth = []
    const imgDataList = []
    const img = new Image();
    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)
        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 is larger than the max
        if (width > maxWidth) {
            ratio = maxWidth / width;   // get ratio for scaling image
            // $(this).css("width", maxWidth); // Set new width
            // $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }
        // Check if current height is larger than max
        if (height > maxHeight) {
            ratio = maxHeight / height; // get ratio for scaling image
            // $(this).css("height", maxHeight);   // Set new height
            // $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
            height = height * ratio;    // Reset height to match scaled image
        }
        doc.addImage({
            imageData: imgData,
            x: 20,
            y: 5,
            w: width,
            h: height,
            angle: -20
        });
        if (imgDataList.length !== Object.keys(imagesList).length)
            doc.addPage();
        if (imgDataList.length == Object.keys(imagesList).length) {
            doc.save('sample-file.pdf');
            //window.open(doc.output('bloburl'), '_blank');
        }
    }

    function jsPDFimages() {
        imagesList={ "imag1": "https://as2.ftcdn.net/jpg/00/42/98/87/500_F_42988762_JMNpHWOFWnbtCBZeYsRo5PmzD28rIquS.jpg", "imag2": "https://as2.ftcdn.net/jpg/00/42/98/87/500_F_42988762_JMNpHWOFWnbtCBZeYsRo5PmzD28rIquS.jpg" }
        for (var item in imagesList) {
            getImageFromUrl(imagesList[item], createPDF);
        }
    }
</script>

这个也一样

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script>
    function getDataUri(url,callback)
{
        var image = new Image();
        image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain
        image.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight; 

            //next three lines for white background in case png has a transparent background
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#fff';  /// set white fill style
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            canvas.getContext('2d').drawImage(this, 0, 0);
            // resolve(canvas.toDataURL('image/jpeg'));
            callback(canvas.toDataURL('image/jpeg'));
        };
        image.src = url;  
}

var doc = new jsPDF();

getDataUri("https://as2.ftcdn.net/jpg/00/42/98/87/500_F_42988762_JMNpHWOFWnbtCBZeYsRo5PmzD28rIquS.jpg", createPDF);

function createPDF(logo) {
    doc.addImage(logo, 'jpg', 0, 5, 50, 50);
    doc.save('sample-file.pdf');
}

</script>

或者这个:)

//Function converts an image URL to a Base 64 string
// "url"       - The URL of the image
// "callback"  - The function that is called on completion.
//               The Base 64 string is passed to the
//               callback as an argument.
function toDataUrl(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    };
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

// Create and save  the PDF.
// The argument is the Base64 string for the image.
function makePDF(base64Img) {
  var doc = jsPDF({ // reinitialize doc
    orientation: "portrait",
    unit: "in",
    format: "letter"
  });
	doc.addImage(base64Img, "JPEG", 0, 0, 8.5, 11);
	doc.save();
}

// Convert URL to Base64, then call makePDF function.
toDataUrl("https://as2.ftcdn.net/jpg/00/42/98/87/500_F_42988762_JMNpHWOFWnbtCBZeYsRo5PmzD28rIquS.jpg", makePDF);

// The following is theoretically equivalent, but it
// currently would fail, due to jsPDF not accepting a
//URL string as a parameter.

//makePDF("https://promo.bradbrownmagic.com/pdf-flyer/flyers/poster-dark-cmyk.jpg")

&lt;script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

如果您更喜欢 async/await 机制，您可以修改 Craig Howard 的答案中的函数以返回一个承诺：

function getDataUri(url)
{
    return new Promise(resolve => {
        var image = new Image();
        image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain

        image.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight; 

            //next three lines for white background in case png has a transparent background
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#fff';  /// set white fill style
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            canvas.getContext('2d').drawImage(this, 0, 0);

            resolve(canvas.toDataURL('image/jpeg'));
        };

        image.src = url;
    })
}

这使得将图像添加到 pdf 的代码非常紧凑：

var doc = new jsPDF();

var logo = await getDataUri(imgUrl);
doc.addImage(logo, 'PNG', left, top, imgWidth, imgHeight);

【讨论】：

【解决方案3】：

这是我针对相同问题的解决方案。

let logo = null;

getDataUri(imgUrl, function(dataUri) {
    logo = dataUri;
    console.log("logo=" + logo);
});

function getDataUri(url, cb)
 {
        var image = new Image();
        image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain

        image.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight; 

            //next three lines for white background in case png has a transparent background
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#fff';  /// set white fill style
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            canvas.getContext('2d').drawImage(this, 0, 0);

            cb(canvas.toDataURL('image/jpeg'));
        };

        image.src = url;
   }

然后生成pdf

    var doc = new jsPDF();

    let left = 15;
    let top = 8;
    const imgWidth = 100;
    const imgHeight = 100;

    doc.addImage(logo, 'PNG', left, top, imgWidth, imgHeight);

    doc.output('dataurlnewwindow'); //opens pdf in new tab

【讨论】：

我在 Object.jsPDFAPI.addImage (jspdf.debug.js:4534) 的 isDOMElement (jspdf.debug.js:4199) 处收到“未捕获的类型错误：无法读取 null 的属性“nodeType”我尝试使用这个答案