Develop Reference

Use jsPDF to add a rounded image

I am adding an image to my PDF document using the jsPDF library:
loadImageFromURL(URL, function (image) {
document.circle(20, 20, 10, 'S');
document.addImage(image, 'JPEG', 20, 20);
});
function loadImageFromURL(URL, callback) {
var image = new Image();
image.src = URL;
image.onload = function () {
callback(image);
};
}
The problem is that I want to fit the image in the circle that I create before adding the image. How can I transform my image to crop into a circle and fit it in my previous circle?
I have tried to:
image.style.borderRadius = "50%";
But this didn't take any effect. How can I crop my image into a circle?
EDIT:
After some research I have found out that jsPDF doesn't accept styles. I have also found that jsPDF has a "clip" function, but I am not sure how to use it. Could I somehow add my image and then clip it with a circle?

I have a hack to get a rounded image in jspdf library by simply using an image and circle.
//First I Created Background from Rectangle with some color
doc.setFillColor(94,101,121);
doc.setDrawColor(94,101,121);
doc.rect(0, 0,width, 115, 'FD');
//Secondly I take a picture in square format
doc.addImage(img, 'JPEG', 84, 9, 52, 52,3,3);
doc.setLineWidth(0);
doc.setDrawColor(0)
doc.setFillColor(255, 255, 255)
//Third,I Created a circle and increased the line width until
it covers all the corners of image in circuralar format
doc.setLineWidth(15)
doc.setDrawColor(94,101,121);
doc.setFillColor(255, 0, 0)
doc.circle(110, 35, 33, 'Fd')
First , Try this code in https://parall.ax/products/jspdf then implement the idea according to your need.

Create dynamic pdf content using jsPDF

I would generate a pdf with a dynamic content.
The text content could change so their positions also
Actually I'm fixing statically text position, but when the text content change their width is not the same and this is consing overlapping content.
const pdf = new jsPDF('l', 'px', 'a4');
pdf.internal.scaleFactor = 0.75;
const elm = this.logoActivity.nativeElement.src;
pdf.addImage(elm, 'png', 20, 20, 50, 16);
pdf.setFontType("bold");
pdf.setTextColor(255, 182, 18);
pdf.text(150, -280, "dynamic txt");
pdf.setTextColor(0, 0, 0);
pdf.text(30, -250, _.startCase(this.dateOfTheDay));
console.log(this.filterService.filters$.value);
pdf.text(100, -250, this.activityService.activity);
pdf.save(`finename.pdf`);
I would like to know how can I place element as in HTML page ( next element is placed after).
Should I create an HTML template then use html2canvas to render it ? The problem with html2canvas is that it generates an image/canvas so the text quality is not as good as jspdf add-elements methods.
is there other solutions ?

How to calculate the vertical height in jsPDF?

I'm using the jspdf library and I'm facing some problems in the content position, suppose I have this pdf:
var doc = new jsPDF();
doc.setFontSize(12);
doc.text("some text", 15, 14); //<- vertical height is 14
as you can see I placed the text to x = 15 and y = 14, how can I calculate the used height (y) for add the next content? eg:
doc.addImage(someImage, 'JPEG', 15, 10, 60, 10);
as you can see I have an image that is:
x: 15
y: 10
width: 60
height: 10
but how can I know the used vertical height to add the new content? Because in the example above the image will overlay the text (y = 10).
I'm looking for a function that calculate the used height in the document, so I can know where to place the new content in the (vertical y) height.
Maybe there is another and simple solution to do this?
Thanks in advance.

You can use a work around for this as follows.
Crete a variable var y=14 and use this variable in your text part.
doc.text("some text", 15, y);
You can reuse the same variable in order to place image after it. or may be if you need space, you can reuse this variable as
var img_y=y+10;
doc.addImage(someImage, 'JPEG', 15, img_y, 60, 10);

How to change line color in jspdf?

How to change the color of line, produced by using line(x1, y1, x2, y2) method?

Looks like it is possible to accomplish this using setDrawColor() function.
var doc = new jsPDF();
doc.setDrawColor(255, 0, 0);
doc.line(35, 30, 100, 30);
doc.save('line.pdf');
JSFiddle
UPD: if you add new page to document, you need to run setDrawColor() function again. Otherwise the color on the new page will be default black.

You must call the setDrawColor function before the line function. For example:
var doc = new jsPDF();
doc.setDrawColor(255,0,0); // draw red lines
doc.line(100, 20, 100, 60);
doc.save('Red_line.pdf');

You have to call the setDrawColor function from the jsPDF.
This example definitely helps you
var pdf = new jsPDF();
pdf.setDrawColor("#096dd9");
//horizontal line
pdf.setLineWidth(0.2)
pdf.line(2, 25, 555, 25);
//vertical line
pdf.line(30, 2, 30, 100);

How to add text to a raphael js element

I want to add text to a element in raphael js,
I have added text with
r.text(30, 20, "ellipse").attr({fill: color});
But how to add this text to
ec = r.ellipse(190, 100, 30, 20);
regards

Raphael does not have child/parent relationship between elements, so you will set same position for them e.g.
ec = paper.ellipse(190, 100, 30, 20);
paper.text(190, 100, "ellipse").attr({fill: '#ff0000'});
So if you want a ellipse with text, create your own JavaScript object which handles positioning of both.
or alternate way is to group elements via set e.g.
var eltext = paper.set();
el = paper.ellipse(0, 0, 30, 20);
text = paper.text(0, 0, "ellipse").attr({fill: '#ff0000'})
eltext.push(el);
eltext.push(text);
eltext.translate(100,100)

You can easly add text to youR elements creating a text Raphael element and add as attribute text into your element.
elText = r.text(.....);
yourEl.attr({text:elText});