使用jspdf在pdf中添加图像答案

【问题标题】：Add image in pdf using jspdf使用jspdf在pdf中添加图像
【发布时间】：2013-10-04 14:59:34
【问题描述】：

我正在使用 jspdf 将图像转换为 PDF。

我已使用 base64encode 将图像转换为 URI。但问题是控制台中没有显示错误或警告。

生成了一个带有 Hello World 文本的 PDF，但其中没有添加任何图像。

这是我的代码。

function convert(){
        var doc = new jsPDF();
        var imgData = 'data:image/jpeg;base64,'+ Base64.encode('Koala.jpeg');
        console.log(imgData);
        doc.setFontSize(40);
        doc.text(30, 20, 'Hello world!');
        doc.output('datauri');
        doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

    }

【问题讨论】：

这里有什么问题？
一个疯狂的猜测是他或她希望 img 显示在 pdf 上
@Brainmaniac 一个疯狂的猜测 /:) 我认为问题是在编辑或类似的事情之前

标签： javascript jquery image jspdf

【解决方案1】：

虽然我不确定，但图像可能不会被添加，因为您在添加之前创建了输出。试试：

function convert(){
    var doc = new jsPDF();
    var imgData = 'data:image/jpeg;base64,'+ Base64.encode('Koala.jpeg');
    console.log(imgData);
    doc.setFontSize(40);
    doc.text(30, 20, 'Hello world!');
    doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
    doc.output('datauri');
}

【讨论】：

addImage函数的所有参数是什么？
@Grez.Kev 已经有一段时间了，但如果我没记错的话是：addImage(image, format, xPosition, yPosition, width, height)。我希望这会有所帮助！
它是addImage(imageData, format, x, y, width, height, alias, compression, rotation)。阅读rawgit.com/MrRio/jsPDF/master/docs/module-addImage.html
Base64.encode('filename.jpeg') 不编码图片，这种方式只对文件名有效？！
我们可以将高度和宽度设置为 100%，我的意思是我们可以根据 pdf 中的可用空间制作适合的图像

【解决方案2】：

你定义了 Base64？如果没有定义，会出现这个错误：

ReferenceError: Base64 未定义

【讨论】：

您可以使用在线转换器并将字符串插入到您的代码中。 base64-image.de

【解决方案3】：

我觉得它很有用。

var imgData = 'data:image/jpeg;base64,verylongbase64;'

var doc = new jsPDF();

doc.setFontSize(40);
doc.text(35, 25, "Octonyan loves jsPDF");
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);

http://mrrio.github.io/jsPDF/

【讨论】：

【解决方案4】：

我遇到了同样的问题，未定义 Base64。我去了an online encoder，然后将输出保存到一个变量中。这对于许多图像可能并不理想，但对于我的需要来说已经足够了。

function makePDF(){
    var doc = new jsPDF();
    var image = "data:image/png;base64,iVBORw0KGgoAA..";
    doc.addImage(image, 'JPEG', 15, 40, 180, 160);
    doc.save('title');
}

【讨论】：

您有图像/png，但添加为 jpg。这听起来不对
@mplungjan data:image/png 只是拼写错误，data:image/jpeg 一切正常

【解决方案5】：

在 TypeScript 中，您可以这样做：

private getImage(imagePath): ng.IPromise<any> {
    var defer = this.q.defer<any>();
    var img = new Image();
    img.src = imagePath;
    img.addEventListener('load',()=>{
       defer.resolve(img);
    });


    return defer.promise;
}

使用上述函数获取图像对象。然后将以下内容添加到pdf文件中：

pdf.addImage(getImage(url), 'png', x, y, imagewidth, imageheight);

在纯 JavaScript 中，函数如下所示：

function (imagePath) {
        var defer = this.q.defer();
        var img = new Image();
        img.src = imagePath;
        img.addEventListener('load', function () {
            defer.resolve(img);
        });
        return defer.promise;
    };

【讨论】：

【解决方案6】：

首先你需要加载图片，转换数据，然后传递给jspdf（在typescript中）：

loadImage(imagePath): ng.IPromise<any> {
    var defer = this.q.defer<any>();
    var img = new Image();
    img.src = imagePath;
    img.addEventListener('load',()=>{
            var canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;

            var context = canvas.getContext('2d');
            context.drawImage(img, 0, 0);

            var dataURL = canvas.toDataURL('image/jpeg');

            defer.resolve(dataURL);
    });

    return defer.promise;
}

generatePdf() {
    this.loadImage('img/businessLogo.jpg').then((data) => {
        var pdf = new jsPDF();
        pdf.addImage(data,'JPEG', 15, 40, 180, 160);
        pdf.text(30, 20, 'Hello world!');
        var pdf_container =  angular.element(document.getElementById('pdf_preview'));
        pdf_container.attr('src', pdf.output('datauristring'));
    });
}

【讨论】：

【解决方案7】：

可能有点晚了，但我最近遇到这种情况并找到了一个简单的解决方案，需要2个功能。

加载图像。

function getImgFromUrl(logo_url, callback) {
    var img = new Image();
    img.src = logo_url;
    img.onload = function () {
        callback(img);
    };
}

在第一步的onload事件中，进行回调以使用jspdf文档。

function generatePDF(img){
    var options = {orientation: 'p', unit: 'mm', format: custom};
    var doc = new jsPDF(options);
    doc.addImage(img, 'JPEG', 0, 0, 100, 50);}

使用上述功能。

var logo_url = "/images/logo.jpg";
getImgFromUrl(logo_url, function (img) {
    generatePDF(img);
});

【讨论】：

【解决方案8】：

上面的代码对我不起作用。我找到了新的解决方案：

 var pdf = new jsPDF();
 var img = new Image;
 img.onload = function() {
     pdf.addImage(this, 10, 10);
     pdf.save("test.pdf");
 };
 img.crossOrigin = "";  
 img.src = "assets/images/logo.png";

【讨论】：

【解决方案9】：

无需添加任何额外的 base64 库。 简单的 5 行解决方案 -

var img = new Image();
img.src = path.resolve('sample.jpg');

var doc = new jsPDF('p', 'mm', 'a3');  // optional parameters
doc.addImage(img, 'JPEG', 1, 2);
doc.save("new.pdf");

【讨论】：

path.resolve 是 Node JS 的东西。它基本上计算出相对于您的文件的正确文件路径。如果您不想使用它，您可以提供文件源 (/something/something/myfile.jpg) 而不是 path.resolve()
您正在加载一个“jpg”文件，但您在doc.addImage中将其设置为“png”
@MustkeemK 你可以通过这个链接：artskydj.github.io/jsPDF/docs/module-addImage.html
在后面的版本中，addImage 需要 4 个参数。
而不是 doc.save("new.pdf");我们可以使用 doc.open("new.pdf") 在新选项卡/窗口中打开该 pdf 文件吗？ ?

【解决方案10】：

这在 Angular 2 中对我有用：

var img = new Image()
img.src = 'assets/sample.png'
pdf.addImage(img, 'png', 10, 78, 12, 15)

jsPDF 1.5.3 版

assets 目录位于 Angular 项目根目录的 src 目录中

【讨论】：

这对我有用。在我将“png”添加到 addImage 之前，它没有用。
在指定扩展名时对我也不起作用。处理程序：“错误：PNG 文件不完整或损坏”

【解决方案11】：

如果你有

ReferenceError: Base64 未定义

你可以上传你的文件here你会得到一些东西：

data:image/jpeg;base64,/veryLongBase64Encode....

在你的 js 上做：

var imgData = 'data:image/jpeg;base64,/veryLongBase64Encode....'
var doc = new jsPDF()

doc.setFontSize(40)
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160)

可以看例子here

【讨论】：

【解决方案12】：

对于base64的结果，在转换为画布之前：

var getBase64ImageUrl = function(url, callback, mine) {

                    var img = new Image();

                    url = url.replace("http://","//");

                    img.setAttribute('crossOrigin', 'anonymous');

                    img.onload = function () {
                        var canvas = document.createElement("canvas");
                        canvas.width =this.width;
                        canvas.height =this.height;

                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(this, 0, 0);

                        var dataURL = canvas.toDataURL(mine || "image/jpeg");

                        callback(dataURL);
                    };
                    img.src = url;

                    img.onerror = function(){

                        console.log('on error')
                        callback('');

                    }

            }

   getBase64ImageUrl('Koala.jpeg', function(img){
         //img is a base64encode result
         //return img;
          console.log(img);

          var doc = new jsPDF();
              doc.setFontSize(40);
              doc.text(30, 20, 'Hello world!');
              doc.output('datauri');
              doc.addImage(img, 'JPEG', 15, 40, 180, 160);
    });

【讨论】：