使用jspdf在pdf中添加图片

Question

使用jspdf在pdf中添加图片

javascriptjqueryimagejspdf

49

我正在使用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);

    }

- Navya

2

这里的问题是什么？ - Suresh Atta

12

他或她希望图片能够显示在 PDF 上，这只是一个猜测。 - Brainmaniac

2

@Brainmaniac 瞎猜一下 /:) 我想这个问题是在编辑之前或类似的情况下提出的。 - ehab

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ivan Ferrer · Answer 1

将结果转换为base64之前，先转换为canvas：

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);
    });

- Hongyang · Answer 2

在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;
    };