使用jspdf以pdf格式添加图像
我正在使用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); } 虽然我不确定，但是在添加图像之前创建输出可能不会添加图像。 尝试：
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'); }
你定义了Base64？ 如果未定义，则会出现此错误：
ReferenceError：未定义Base64
我发现它很有用。
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);
也许有点晚了，但我最近遇到这种情况并找到了一个简单的解决方案，需要2个function。
-
加载图像。
function getImgFromUrl(logo_url, callback) { var img = new Image(); img.src = logo_url; img.onload = function () { callback(img); }; } -
在第一步的onload事件中，进行回调以使用jspdf doc。
function generatePDF(img){ var options = {orientation: 'p', unit: 'mm', format: custom}; var doc = new jsPDF(options); doc.addImage(img, 'JPEG', 0, 0, 100, 50);} -
使用上述function。
var logo_url = "/images/logo.jpg"; getImgFromUrl(logo_url, function (img) { generatePDF(img); });
我没有定义Base64的问题。 我去了一个在线编码器 ，然后将输出保存到变量中。 对于许多图像来说，这可能并不理想，但对于我的需求来说已经足够了。
function makePDF(){ var doc = new jsPDF(); var image = "data:image/png;base64,iVBORw0KGgoAA.."; doc.addImage(image, 'JPEG', 15, 40, 180, 160); doc.save('title'); }
上面的代码对我不起作用。 我发现了新的解决方案
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";
private getImage(imagePath): ng.IPromise { var defer = this.q.defer (); var img = new Image(); img.src = imagePath; img.addEventListener('load',()=>{ defer.resolve(img); }); return defer.promise; }
使用上面的函数来getimage对象。 然后将以下内容添加到pdf文件pdf.addImage（getImage（url），’png’，x，y，imagewidth，imageheight）;
首先，您需要加载图像，转换数据，然后传递给jspdf（在typescript中）：
loadImage(imagePath): ng.IPromise { var defer = this.q.defer (); 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')); }); }
无需添加任何额外的base64库。 简单的5线解决方案 –
var img = new Image(); img.src = path.resolve('sample.jpg'); var doc = new jsPDF('p', 'mm', 'a3'); // optional parameters doc.addImage(img, 'PNG', 1, 2); doc.save("new.pdf");
javascript function is like this function (imagePath) { var defer = this.q.defer(); var img = new Image(); img.src = imagePath; img.addEventListener('load', function () { defer.resolve(img); }); return defer.promise; };