Using PDFKit on node.js:
var PDFDocument = require('pdfkit')
var doc = new PDFDocument()
doc.image('images/test.jpeg')
How can I centerize an image added to the PDF?
Is it optional to do it using PDFKit or do I need to use another library?
I've found an indirect way to solve the problem - simply calculate the center and locate the picture there:
doc.image('images/test.jpeg', (doc.page.width - imageWidth) /2 )
Using PDFKit on node.js: We can center the image using following code
doc.image('path/to/image.png', {
fit: [250, 300],
align: 'center',
valign: 'center'
});
You can use this, this code place your image at middle of the line
let imageWidth = 180 // what you wants
doc.image('path/to/image.png',
doc.page.width/2 - imageWidth/2,doc.y,{
width:imageWidth
});
Related
I'm building a software using express-mongodb-ejs. I've tried some of the npm packages to generate and download pdf. But, I cant generate pdf which having the dynamic image path.
I've used html-pdf package, which seems pretty good. But, It can't render the dynamic image path from database.
Here is the screenshot where I used the html-pdf package.
Here is the detailed problem link where I asked about this package related question.
Can anyone provide me any detailed solution regarding the problem? Any npm package should be fine as long as it can help me to download pdf using express.
You may use a popular node module called pdfkit. Please run the below program and check it. You need an image with the name pro.jpg in the same folder that you run the script. It will generate an output.pdf file.
Here is the example:
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a document
const doc = new PDFDocument();
// Pipe its output somewhere, like to a file or HTTP response
// See below for browser usage
doc.pipe(fs.createWriteStream('output.pdf'));
// Add an image, constrain it to a given size, and center it vertically and horizontally
doc.image('pro.jpg', {
fit: [250, 300],
align: 'center',
valign: 'center'
});
// Add another page
doc
.addPage()
.fontSize(25)
.text('Here is some vector graphics...', 100, 100);
// Draw a triangle
doc
.save()
.moveTo(100, 150)
.lineTo(100, 250)
.lineTo(200, 250)
.fill('#FF3300');
// Apply some transforms and render an SVG path with the 'even-odd' fill rule
doc
.scale(0.6)
.translate(470, -380)
.path('M 250,75 L 323,301 131,161 369,161 177,301 z')
.fill('red', 'even-odd')
.restore();
// Add some text with annotations
doc
.addPage()
.fillColor('blue')
.text('Here is a link!', 100, 100)
.underline(100, 100, 160, 27, { color: '#0000FF' })
.link(100, 100, 160, 27, 'http://google.com/');
// Finalize PDF file
doc.end();
I'm wanting to convert an image url so it can include the transformation properties (I want to change the width and height). Here is an example of what I store in my database (the url Cloudinary gives us when we upload an image)
https://res.cloudinary.com/blah/image/upload/v15/orsdrkjfddaqjlwsk0t.jpg
I'm using node.js and the cloudinary library gives us the following method: cloudinary.url().
It does not seem to work when I pass the cloudinary image URL to it:
cloudinary.url('https://res.cloudinary.com/blah/image/upload/v15/orsdrkjfddaqjlwsk0t.jpg',
{ width: 100, height: 100 });
It will just return the original url, it won't add any transformation values to it?!
Note: I what I did to get it to work was strip orsdrkjfddaqjlwsk0t.jpg from the url & pass it to the cloudinary.url method. However if the image stored in my database is not one from cloudinary, stripping the nameofimage.jpg from the url won't work! Cloudinary will create a cloudinary URL for it WHICH does not exist.
You need to specify a crop mode for the width and height to take into effect. For example,
cloudinary.url('https://res.cloudinary.com/blah/image/upload/v15/orsdrkjfddaqjlwsk0t.jpg',
{ width: 100, height: 100, crop: "scale"});
developing this app in which there several images on a canvas and i am using using fabricjs.
i want to add text overlaid on an image and then be able to remove it as well.
is a way to directly write over the image or do i have to create another layer and write onto it.
there is text related like
var text = new fabric.Text('hello world', { left: 100, top: 100 });
canvas.add(text);
the problem with the above approach is that if the image moves the text will not, so is it possible that the text could be written directly above the image?
any ideas of how this could be done? i revived several discussions where it's not as clear, how it could be done.
any pointers would be most appreciated.
This could be achieved by creating an image and a text object, then adding both the objects to a group and finally adding that group to the canvas.
Here's an example, showing that in action ...
var canvas = new fabric.Canvas('canvas');
// load image
fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function (img) {
img.scaleToWidth(100);
img.scaleToHeight(100);
// create text
var text = new fabric.Text('hello world', {
left: 10,
top: 5,
fontSize: 15,
fontFamily: 'Verdana',
fill: 'white'
});
// add image and text to a group
var group = new fabric.Group([img, text], {
left: 50,
top: 50,
});
// add the group to canvas
canvas.add(group);
});
canvas{border:1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>
I am not quite clear of what exactly is your requirement.
Regardless of it, i have created a JS Fiddle for you.
https://jsfiddle.net/xpntggdo/9/
textBox=new fabric.Textbox("Enter Text",{
fontSize: 16,
fontFamily: 'Arial',
textAlign: 'left',
width: 180, // for 20 characters
top:arrowTop,
left:arrowLeft
});
canvas.add(textBox);
canvas.renderAll();
This might be of a little help at least. Comment on this answer and I will try to help you more on it if that is possible for me.
I have clipped an image using clipto method of fabricjs and this works fine. But the problem is boudingrect is still to the actual image area. Is there any way to reset boundingrect same as new cropped image? I tried setCoords but this does not work.
FabricJS has two methods available to "crop" an object, the one you are using clipTo(), and a toDataURL() method. Using toDataURL() creates a new image with a reset boundingrect same as new cropped image.
fabric.Image.fromURL('data:image/;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACa0lEQVRYhbVXMW7bQBAcMgRTWCJdC+qFOLAaudFDnEKdYL1AfoCRB8gvkJJUAQw/RI3cSIBg13ZShzxWBEK6sEjf7e3dkYC8Fckhduf2doZHryzLEpY4e/mp3M+jEW7TB/bdq+457rMnpGVeP9v3p7b08K0oE7NoiHk0Yotfxxdt07UnsEy3Gomq+F32qKy+SQRtCVTtn0VDAEBS5nXx7//WbdPpBOQ9/3YywDwaYRYNsUy3dfHksMquHwLF27uieF+53JFFssFK7Gps3Zsg9j+bCcjFb07H+PrnFwD3ik14NYQyCWsH5OKe5wHQ206Lu/BqODkSGgFanBbp+iG71y7cpBDvy/MPxQeozmUdL9Nt3WIuOFyeKc4ntA5UbaRmIw8htyIXXg3mffakPNd8gNM5Tb4SOyySTWPc5hNaB+hA0eRyEQCIvdCKy8W52fDn0Qj7/lRZsazzxOJsosideOyF9XUVV91z7PtT3JyOEbiczaRjqhYT7vKRAGivY1rchdvy1zPQVMeiyFmfcOGm/MoQJmVeezsXsRcCPrTkTXEuf02Afs8/ygdo/kAG77JHiCLXzIjTuVzEhdvyByadfrQPVPmDldhpEpJ94OV/piWvQhS59Uwlihz9T533dw9xmz6oWyAHZXxsH6Dd0ghw7TqmDyzFzv41NHn2sXyAhkf/CxbJxvo9Nw2dCafnicvOwH4mpBKSk9t8oqmPXHYGynP2TNhGx01wk5SNBGQSLh27Tsm24iyBdW+i3I///rb6BPdfIOt83ZsobY8O5wMjAXlAuHB1hK7Wla/1rxlX3KZzV7QmYPIJ2z7b4hVhK2M6UYICmwAAAABJRU5ErkJggg==', function(origImage) {
var origBoundingRect = origImage.getBoundingRect();
fabric.Image.fromURL(origImage.toDataURL({
width: origImage.width - 5,
height: origImage.height - 5
}), function(newImage) {
var newBoundingRect = newImage.getBoundingRect();
console.log('origBoundingRect:\r\n' + JSON.stringify(origBoundingRect) + '\r\n\r\n' + 'newBoundingRect:\r\n' + JSON.stringify(newBoundingRect));
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.7/fabric.min.js"></script>
If you run the code snip-it above it logs to the console a before and after shot of the boundingrect.
Hope this helps, matey. Let me know if you have any further questions.
I am having trouble in rendering svg element to pdf using jspdf . Iam using plugin https://github.com/CBiX/svgToPdf.js/ to do this.
Below is my code
// I recommend to keep the svg visible as a preview
var tmp = document.getElementById("chartContainer");
var svgDoc = tmp.getElementsByTagName("svg")[0];
var pdf = new jsPDF('p', 'pt', 'a4');
svgElementToPdf(svgDoc, pdf, {
scale: 72 / 96, // this is the ratio of px to pt units
removeInvalid: false // this removes elements that could not be translated to pdf from the source svg
});
pdf.output('datauri'); // use output() to get the jsPDF buffer
It is generarting blank pdf. Please help
You can do that using canvg.
Step1: Get "SVG" markup code from DOM
var svg = document.getElementById('svg-container').innerHTML;
if (svg)
svg = svg.replace(/\r?\n|\r/g, '').trim();
Step 2:
Use canvg to create canvas from svg.
var canvas = document.createElement('canvas');
canvg(canvas, svg);
Step 3:
Create image from canvas using .toDataURL()
var imgData = canvas.toDataURL('image/png');
// Generate PDF
var doc = new jsPDF('p', 'pt', 'a4');
doc.addImage(imgData, 'PNG', 40, 40, 75, 75);
doc.save('test.pdf');
Check the demo here http://jsfiddle.net/Purushoth/hvs91vpq/193/
Canvg Repo: https://github.com/gabelerner/canvg
I've tried both svg2pdf.js and addSvgAsImage using canvg internally.
Both didn't work well for me, the resulting images in the pdf where either incorrectly positioned or displayed.
I've ended up doing the following which works very well:
convert the SVG to PNG without any libraries, see my answer to "Convert SVG to image (JPEG, PNG, etc.) in the browser".
just add the result to the pdf using the normal addImage method
I think the current jspdf version (2.3.1) has an addSvgAsImage method, but it takes the svg as a string. I guess you could use an ajax call to retrieve the SVG content, but I just have the SVG in my code and pass it in that way.