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

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

Multiplier property not working properly in "toDataURL" function with cropping in Fabric.js

My original size of the canvas is 800X700.
I am using clipTo to work in a selected portion of a canvas:
var rect = new fabric.Rect({
left: 100,
top: 50,
fill: '#fff',
width: 376,
height: 602,
strokeWidth: 0,
selectable: false
});
rect.set({
clipFor: 'mainCanvas',
});
I make sure all the images and text fall within this portion of the canvas.
What I want to Do:
I want to scale up this portion of canvas to a width and height of 1500X2400 so that it can be used for printing
I am using the below toDataURL function with multiplier as 3
var imgData= canvas.toDataURL({
format: 'png',
width: 376,
height: 602,
top: 50,
left: 100,
multiplier: 3
});
But I am getting only top most portion of the image. Any solution?
Update: More info about the problem
I am using Ubuntu 16.04 and Fabric.js-1.6.2
Demonstrating the problem on JsFiddle
When I click on the enhance image button, only the top left portion of the image is displayed.

how to put black text on top of gray rect in jspdf

I am using jspdf to convert my html page to PDF. So far I have figured out styles in the HTML don't apply to the PDF document. So I'm using doc.text and doc.rect.
I need the text on top of the rectangle but it seems to be that the rectangle is always on the top and it covers the text. How can I resolve this?
This is what I have tried:
var doc = new jsPDF();
doc.setFontSize(17);
doc.setTextColor(255, 0, 0);
doc.text(100,25, 'USD.00');
doc.setFillColor(255,255,200);
doc.rect(100, 20, 10, 10, 'F')

Draw your rectangle before you draw your text
var doc = new jsPDF();
doc.setFontSize(17);
doc.setFillColor(255,255,200);
doc.rect(100, 20, 10, 10, 'F');
doc.setTextColor(255, 0, 0);
doc.text(100,25, 'USD.00');

In jsPDF must be write code in sequence, then first draw the retangle and last write your text.
var doc = new jsPDF();
doc.setDrawColor(0);
doc.setFillColor(255, 0, 0);
doc.rect(40, 50, 30, 12, 'FD'); //Fill and Border
doc.setFontSize(8);
doc.setFontType('normal');
doc.text('hello', 42, 51);

You can use getTextWidth method to set proper width for a rectangle, but then you have to set font size/type before getting the width.
http://raw.githack.com/MrRio/jsPDF/master/docs/module-annotations.html#~getTextWidth

How to take screenshot of canvas? [duplicate]

This question already has answers here:
html5: copy a canvas to image and back
(3 answers)
Closed 9 years ago.
how to take screenshot of canvas?
or How create image, which will consist of image + free zone , located on canvas?

It depends on your framework but basically you can use canvas.toDataURL()
Here is a complete example
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
</script>
</body>
</html>
dataUrl will contains the image and you can save it wherever you want.

It depends what you want to do, the easiest way is to use toDataUrl on your canvas.
canvas.toDataURL('png')
This will encode your canvas to base64, then you could use it in a download link like this
<a href="%dataURI%" download>download</a>
Or just stick it back into the dom in an image tag.
You can then write a controller which is more backend using what ever language to convert that base64 to an image file if you wanted to store an actual copy off the image.
See this post for more info
How to save a PNG image server-side, from a base64 data string