我正在使用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);
}
答案 0 :(得分:14)
虽然我不确定,但可能无法添加图像,因为您在添加之前创建了输出。尝试:
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');
}
答案 1 :(得分:9)
也许有点晚了,但我最近遇到这种情况并找到了一个简单的解决方案,需要2个功能。
加载图片。
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);}
使用上述功能。
var logo_url = "/images/logo.jpg";
getImgFromUrl(logo_url, function (img) {
generatePDF(img);
});
答案 2 :(得分:7)
您定义了Base64?如果未定义,则会出现此错误:
ReferenceError:未定义Base64
答案 3 :(得分: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);
答案 4 :(得分:3)
无需添加任何额外的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");
答案 5 :(得分:3)
这在Angular 2中对我有用:
var img = new Image()
img.src = 'assets/sample.png'
pdf.addImage(img, 'png', 10, 78, 12, 15)
jsPDF版本1.5.3
资产目录位于Angular项目根目录的 src 目录中
答案 6 :(得分:2)
我遇到了与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');
}
答案 7 :(得分:2)
以上代码对我不起作用。 我找到了新的解决方案:
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";
答案 8 :(得分:0)
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;
}
使用上面的函数来getimage对象。 然后将以下内容添加到pdf文件中 pdf.addImage(getImage(url),'png',x,y,imagewidth,imageheight);
答案 9 :(得分:0)
首先你需要加载图像,转换数据,然后传递给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'));
});
}
答案 10 :(得分:0)
如果有
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
答案 11 :(得分:0)
要获得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);
});
答案 12 :(得分:-1)
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;
};