Develop Reference

Adding base64 encoded PNG to PDF is not working

I'm trying to embedd an image into a PDF with jsPDF. For some reason this is not working . This is the Code when I create my PDF:
exportPDF () {
const doc = new jsPDF('p', 'pt')
var footer = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC...'
var header = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...'
/* Some other stuff */
doc.addImage(this.output, 'PNG', 400, 400, 500, 500) #This does not work
doc.addImage(header, 'PNG', 0, 0, 600, 139.86) #For some reason these images work
doc.addImage(footer, 'PNG', 0, 800, 600, 54.68)
/* Some other stuff */
doc.save('Containertreppen Teileliste.pdf')
}
The Variable output is passed from another page and therefore not created in the method (I'm using vuejs). In this Variable the Screenshot of a Babylonjs Scene is stored, encoded in base64.
This is the Code when a take the Screenshot:
printDiv() {
this.scene.render();
const self = this
const options = {
type: "dataURL",
};
this.$html2canvas(document.getElementById("renderCanvas"), options).then(function(canvas){
self.output = canvas
})
},
I'm able to display the screenshot in an HTML-element and I can download it as a normal png but for some reason when I try to add it to my PDF the following error occurs in my console:
Error in v-on handler: "Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData"
I also tried to put the String as src for an HTML-image-element but it changed nothing.
This is the beginning of the Variable output:
"data:image/png;base64,iVBORw..."
Can someone help me with this?

Trying to add image to pdf using jsPDF

Trying this code
pdfGenerate.js
generatePDF = function() {
var imgData = 'D:/work/TiffImages/png/895153.0000.png';
var doc = new jsPDF('p', 'pt', 'a4');
doc.text(20, 20, 'CTS Aarchival');
doc.addImage(imgData, 'PNG', 15, 40, 180, 180);
doc.save('CTStest.pdf'); }
Error:
Uncaught TypeError: doc.addImage is not a function
In HTML I am just calling this method onclick()
And all required js files are included.

addImage function is in another module called *drumroll please* addImage. So if you're importing the jsPdf.js it doens't contain that module.
Here is the doc link. Also check out these github issues here and here

Simple solution:
Instead of using jsPDF.js library use jsPDF.debug.js , it includes all the modules which we need.

You can also do it in this way:
var pdf = new jsPDF();
var img = new Image;
img.onload = function() {
pdf.addImage(this, 10, 10);
pdf.save("CTStest.pdf");
};
img.crossOrigin = "";
img.src = 'D:/work/TiffImages/png/895153.0000.png';

toDataURL() very slow

I have a report with charts and tables.
I am using the html2canvas with jsPDF to export this report to PDF file.
But the process is taking a long time, more than 11000ms.
I've tried to change the format, the quality, but nothing worked.
See below the code I used:
html2canvas($('#first-page'), {
onrendered: function(canvas) {
firstPage = canvas.toDataURL('image/jpeg', 0.5);
},
background: '#ffffff'
});
I'm doing something wrong or really is a problem?
How I can improve the performance?

You don't need to use toDataUrl.http://jsfiddle.net/davidmather/sxp0meer/3/
html2canvas($('#first-page'), {
onrendered: function(canvas) {
var doc = new jsPDF('p', 'mm');
doc.addImage(canvas, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});

How do you concatenate two or images in pdf using Html2Canvas & JsPDF?

I am trying to wrap my head around HTML2Canvas' API but the documentation is extremely limited. The situation is that I am putting 2 or more div's (thier content) into a single PDF where each div represents a different page. Sounds easy right ? Not really. I have tried everything to make this work, but the asynchournous nature of JS is making this way harder than it has to be.
Here is what I have
html2canvas($("#monthly_agg_report_container"), {
onrendered: function(canvas)
{
var doc = new jsPDF('landscape', 'pt','a2');
var imgData = canvas.toDataURL("image/png");
doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);
doc.save('report.pdf') ;
}
}).then(function(){
//another html2canvas doesnt work. PDF comes with a empty page. Because `doc` is out of scope
alert('done')
})

This is the code that worked for me:
function generatePDF() {
var doc = new jsPDF('landscape', 'pt','a2');
console.log(doc);
html2canvas($("#monthly_agg_report_container"), {
onrendered: function(canvas)
{
var imgData = canvas.toDataURL("image/png");
doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);
// doc.save('report.pdf') ;
}
}).then(function(){
html2canvas($("#descriptor_stats_container"), {
onrendered: function(canvas)
{
console.log('2nd doc '+doc);
doc.addPage();
var imgData = canvas.toDataURL("image/png", 1.0);
doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);
//doc.save('report.pdf') ;
}
}).then(function(){
alert('done')
html2canvas($("#alerts_stats_container"), {
onrendered: function(canvas)
{
console.log('2nd doc '+doc);
doc.addPage();
var imgData = canvas.toDataURL("image/png");
doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);
doc.save('report.pdf') ;
}
})
})
})
}

where should i put controller code in a angularjs application

I have just started learning angularjs and nodejs.
I am trying to build an app using fabric.js to upload pictures and edit it. I have seen a link here, the second answer is really helpful.
However when I tried to implement it in my own application I have faced problem. I use the angular tutorial for the application. In my own application I know I should put the last part of the code from the question linked in index.html, and put the middle part of the code in style.css. However, I don't know where to put the first part of the code, from my previous experience in extJS I know it should be a controller.
I tried to create a new file called controller.js under the same directory of index.html, paste the code there and include the controller into the index.html in the script tag, but it didn't work.
Here is the js code I am trying to implement
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});

You don't need the filereader, just have to call createObjectURL
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var url = URL.createObjectURL(file);
fabric.Image.fromURL(url, function (img) {
var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
});

I find where I do wrong. There is nothing wrong with these backend code, it is in index.html, where I script the controller in the wrong place that caused the trouble. I have already solved that.