Develop Reference

I can't render a image for my pdf using jspdf

I have a method that generate a pdf for me but i need to make a image (png ou jpg) for this pdf, i have already make a pdf but i can't do a image for my pdf, it shows a error.
I'm using angular and ionic, and i don't using html2canvas because doesn't support web components yet.
My method that generates a pdf:
generatePdf(){
let imgData = 'data:image/jpeg;base64,verylongbase64;'
let doc = new jsPDF();
let specialElementsHandlers = {
'#editor': function(element, renderer){
return true;
}
};
let report = this.report.nativeElement;
doc.fromHTML(report.innerHTML, 15, 15, {
'width': 100,
'elementHandlers': specialElementsHandlers
});
doc.text('my pdf', 15, 15);
doc.text(this.product.data, 15,290);
doc.text(this.product.local, 80,290);
doc.text(this.product.tag, 150, 290);
//render and download pdf
doc.save('teste.pdf');
doc.setFontSize(40);
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);
}
Error in console:
ERROR Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData

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';

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.

convert web page to a pdf with styles

I want to convert a web page to PDF including all the styles I've added.
I've used jspdf.js and html2Canvas. But I got only a blur picture in PDF form.
I've searched for many JavaScript codes but didn't find a correct one.
Script I have written is:
function getPDF() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("Image/jpeg");
//window.open(img);
var doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 0, 0, 440, 627);
doc.save("download");
}
});
}
Thank You!

There may be a few things that are contributing.
Your encoder options for the canvas.toDataURL are missing, so you're getting the defaults. The defaults may be creating a low quality image. Try this for the highest quality JPEG image:
var img = canvas.toDataURL("Image/jpeg", 1.0);
You might also try creating your jsPDF object with measurements, rather than pixels:
var pdf = new jsPDF("p", "mm", "a4"); // jsPDF(orientation, units, format)
And when you add the image, scale it to the dimensions of the page:
pdf.addImage(imgData, 'JPEG', 10, 10, 190, 277); // 190x277 mm # (10,10)mm
See if that gives you a better image quality.

image is downloading in chrome but not in safari

In my application I'm using html2canvas for converting a HTML in to canvas and after that i'm converting that canvas to image using toDataURL() every thing fine in chrome the image is downloading soon after the page loads, but in safari the image loading in a the same page without downloading.
$(document).ready(function(e) {
html2canvas(document.body, {
onrendered: function(canvas) {
var test = document.getElementsByClassName('test'); //finding the div.test in the page
$(test).append(canvas); //appending the canvas to the div
var canvas = document.getElementsByTagName('canvas');
$(canvas).attr('id','test'); //assigning an id to the canvas
var can2 = document.getElementById("test");
var dataURL = can2.toDataURL("image/png");
document.getElementById("image_test").src = dataURL; //assigning the url to the image
$(canvas).remove(); //removing the canvas from the page
download(can2,'untitled.png');
function download(canvas_name,filename)
{
var tempLink = document.createElement('a');
e;
tempLink.download = filename;
tempLink.href = dataURL;
if (document.createEvent) // create a "fake" click-event to trigger the download
{
e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false,false, 0, null);
tempLink.dispatchEvent(e);
}
else if (tempLink.fireEvent)
{
tempLink.fireEvent("onclick");
}
}
},logging:true,background: "#fff",
});
});
Can anybody help me what i nee to change to download the file in Safari?

iOS limitations
The iOS there are limitations which prevent direct download (practically almost all formats), where images can be downloaded holding the "touch".
The best alternative to this would be to open an "alert" with instructions and after the alert to close call "window.open" with the image.
See the code with an alternative to "iOS"
BUG in Safari (PC and MAC - non iOS - is no problem in webkit technology, but in the browser)
I tried append anchor, create "ghost-iframe" and replace mimetype: application/download.
Download manager open, but not add file after click in "Save" or "Open".
In my opinion this is a BUG in Browser (not is an issue of Webkit, the issue is of Safari).
See code:
$(document).ready(function(e) {
var ghostFrame = document.createElement("iframe");
ghostFrame.name = "myFrame";
document.body.appendChild(ghostFrame);
html2canvas(document.body, {
onrendered: function(canvas) {
var test = document.getElementsByClassName('test'); //finding the div.test in the page
$(test).append(canvas); //appending the canvas to the div
var canvas = document.getElementsByTagName('canvas');
$(canvas).attr('id','test'); //assigning an id to the canvas
var can2 = document.getElementById("test");
var dataURL = can2.toDataURL("image/png");
document.getElementById("image_test").src = dataURL; //assigning the url to the image
$(canvas).remove(); //removing the canvas from the page
var tempLink = document.createElement('a'), e;
tempLink.download = 'untitled.png';
if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) { //iOS = Iphone, Ipad, etc.
alert("Instructions...");
tempLink.target = "_blank";
tempLink.href = dataURL;
} else {
tempLink.target = ghostFrame.name;
tempLink.href = dataURL.replace(/^data[:]image\/png[;]/i, "data:application/download;");//force download
}
if (document.createEvent) // create a "fake" click-event to trigger the download
{
e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
tempLink.dispatchEvent(e);
} else if (tempLink.fireEvent) {
tempLink.fireEvent("onclick");
}
},
logging:true,
background: "#fff",
});
});
Alternative solution (not work in iOS):
You will have to upload the file to the server and then set the required headers for download, see:
Upload image
Download image with .htaccess (add "htaccess" just the folder that the images are generated by <canvas>.toDataURL)
Download image with PHP