jQuery 使用jspdf在pdf中添加图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19065562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add image in pdf using jspdf
提问by Navya
I am using jspdf to convert an image into a PDF.
我正在使用 jspdf 将图像转换为 PDF。
I have converted the image into a URI using base64encode. But the problem is that there are no errors or warnings shown in the console.
我已使用 base64encode 将图像转换为 URI。但问题是控制台中没有显示错误或警告。
A PDF is generated with the text Hello World on it but no image is added in it.
生成一个带有文本 Hello World 的 PDF，但没有在其中添加任何图像。
Here is my code.
这是我的代码。
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);
}
回答by Leon Hooijer
Though I'm not sure, the image might not be added because you create the output before you add it. Try:
虽然我不确定，但可能不会添加图像，因为您在添加之前创建了输出。尝试：
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');
}
回答by AlanMo
maybe a little bit late, but I come to this situation recently and found a simple solution, 2 functions are needed.
也许有点晚了，但我最近遇到了这种情况，并找到了一个简单的解决方案，需要 2 个功能。
load the image.
function getImgFromUrl(logo_url, callback) { var img = new Image(); img.src = logo_url; img.onload = function () { callback(img); }; }in onload event on first step, make a callback to use the 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);}use the above functions.
var logo_url = "/images/logo.jpg"; getImgFromUrl(logo_url, function (img) { generatePDF(img); });
加载图像。
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); });
回答by atik
This worked for me in Angular 2:
这在 Angular 2 中对我有用：
var img = new Image()
img.src = 'assets/sample.png'
pdf.addImage(img, 'png', 10, 78, 12, 15)
jsPDF version 1.5.3
jsPDF 版本 1.5.3
assetsdirectory is in srcdirectory of the Angular project root
assets目录在Angular 项目根目录的src目录中
回答by Abhishek Sinha
No need to add any extra base64 library. Simple 5 line solution -
无需添加任何额外的 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");
回答by annelorayne
You defined Base64? If you not defined, occurs this error:
你定义了 Base64？如果没有定义，会出现这个错误：
ReferenceError: Base64 is not defined
参考错误：未定义 Base64
回答by punitha puni
The above code not worked for me. I found new solution :
上面的代码对我不起作用。我找到了新的解决方案：
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";
回答by Saboor Awan
I find it useful.
我觉得很有用。
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);
回答by MrGood
I had the same issue with Base64 not being defined. I went to an online encoderand then saved the output into a variable. This probably is not ideal for many images, but for my needs it was sufficient.
我有同样的问题，未定义 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');
}
回答by Ibrahima Timera
if you have
如果你有
ReferenceError: Base64 is not defined
参考错误：未定义 Base64
you can upload your file hereyou will have something as :
data:image/jpeg;base64,/veryLongBase64Encode....
数据：图像/jpeg；base64，/veryLongBase64Encode....
on your js do :
在你的 js 上做：
var imgData = 'data:image/jpeg;base64,/veryLongBase64Encode....'
var doc = new jsPDF()
doc.setFontSize(40)
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160)
Can see example here
可以在这里查看示例
回答by Ivan Ferrer
For result in base64, before convert to canvas:
对于 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);
});
