使用jspdf在pdf中添加图像
Posted
技术标签:
【中文标题】使用jspdf在pdf中添加图像【英文标题】：Add image in pdf using jspdf 【发布时间】：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 一个疯狂的猜测 /:) 我认为问题是在编辑或类似的事情之前 【参考方案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。这听起来不对 @mplungjandata: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);
);
【讨论】：
以上是关于使用jspdf在pdf中添加图像的主要内容，如果未能解决你的问题，请参考以下文章