I tried pdf2json:
const PDFParser = require("pdf2json");
let pdfParser = new PDFParser();
pdfParser.loadPDF("./30x40.pdf"); // ex: ./abc.pdf
pdfParser.on("pdfParser_dataReady", pdfData => {
width = pdfData.formImage.Width; // pdf width
height = pdfData.formImage.Pages[0].Height; // page height
console.log(`Height : ${height}`) // logs 70.866
console.log(`Width : ${width}`) // logs 53.15
});
But it gave the dimensions in a unknown units!
The dimensions in pixels will help me include them in the pdf-poppler module that converts a pdf file to an image and it needs the pdf file height in pixels.
Try calipers.
Code example:
const Calipers = require('calipers')('png', 'pdf');
Calipers.measure('./30x40.pdf')
.then(data => {
const { width, height } = data.pages[0];
});
Alternatively, try a module which converts it without needing width/height:
pdf2pic pdf-image node-imagemagick
If you're set on using pdf2json, please read this bit of documentation describing the units of the output.
Bit late to the party, but as discussed here: stackoverflow pdf2json unit
you can multiply your width and height by 24
Just like:
width = pdfData.formImage.Width * 24; // pdf width
height = pdfData.formImage.Pages[0].Height * 24; // page height
and you get Pixel.
Related
I am trying to do something the same as this Merge images by mask, but in NodeJS Sharp library instead of Python.
I have two images and a polygon, I want the result to be the merged image where all the pixels inside polygon from image1 otherwise image2, more specifically, how to apply the 'mergeImageWithPolygonMask' function below:
const sharp = require('sharp')
let image1 = sharp('image1.jpg')
let image2 = sharp('image2.jpg')
let polygon = [[0,0], [0, 100], [100, 100], [100, 0]]
let newImage = mergeImagesWithPolygonMask(image1, image2, polygon) // how to do this?
newImage.toFile('out.jpg')
After playing with Sharp library for a while, I come up with a solution, which I think will help other people also as this is a quite common use case.
async function mergeImagesWithPolygonMask(image1, image2, polygonMask, config) {
// merge two images with the polygon mask, where within the polygon we have pixel from image1, outside the polygon with pixels from image2
const { height, width } = config;
// console.log("height", height, "width", width);
const mask = Buffer.from(
`<svg height="${height}" width="${width}"><path d="M${polygonMask.join(
"L"
)}Z" fill-opacity="1"/></svg>`
);
const maskImage = await sharp(mask, { density: 72 }).png().toBuffer();
const frontImage = await image2.toBuffer();
const upperLayer = await sharp(frontImage)
.composite([{ input: maskImage, blend: "dest-in", gravity: "northwest" }])
// Set the output format and write to a file
.png()
.toBuffer();
return image1.composite([{ input: upperLayer, gravity: "northwest" }]);
}
This function will first create an svg image and use sharp composite method to create the polygon mask on the front image. And then composite this masked front image to the background image. The size passed in in config specify the size of the svg image.
to use this function:
const sharp = require('sharp')
const image1 = sharp('image1')
const image2 = sharp('image2')
polygon = [[682, 457], [743, 437], [748, 471], [689, 477]]
mergeImagesWithPolygonMask(image1, image2, polygon, {height: 720, width:1280})
Im trying to use PDFKit to generate a simple pdf, for the most part the pdf works but albeit in a very non useful way, what i have is a deck building API that takes in a number of cards, each of these objects i want to export to a pdf, its as simple as displaying their name, but as it is, the pdf only renders one card at a time, and only on one line, what id like to happen is to get it to split the text into columns so itd look similar to this.
column 1 | column 2
c1 c8
c2 c9
c3 c10
c4 c(n)
here is my code so far,
module.exports = asyncHandler(async (req, res, next) => {
try {
// find the deck
const deck = await Deck.findById(req.params.deckId);
// need to sort cards by name
await deck.cards.sort((a, b) => {
if (a.name < b.name) {
return -1;
} else if (a.name > b.name) {
return 1;
} else {
return 0;
}
});
// Create a new PDF document
const doc = new PDFDocument();
// Pipe its output somewhere, like to a file or HTTP response
doc.pipe(
fs.createWriteStream(
`${__dirname}/../../public/pdf/${deck.deck_name}.pdf`
)
);
// Embed a font, set the font size, and render some text
doc.fontSize(25).text(`${deck.deck_name} Deck List`, {
align: "center",
underline: true,
underlineColor: "#000000",
underlineThickness: 2,
});
// We need to create two columns for the cards
// The first column will be the card name
// The second column will continue the cards listed
const section = doc.struct("P");
doc.addStructure(section);
for (const card of deck.cards) {
doc.text(`${card.name}`, {
color: "#000000",
fontSize: 10,
columns: 2,
columnGap: 10,
continued: true,
});
}
section.end();
// finalize the PDF and end the response
doc.end();
res.status(200).json({ message: "PDF generated successfully" });
} catch (error) {
console.error(error);
res.status(500).json({
success: false,
message: `Server Error - ${error.message}`,
});
}
});
At Present this does generate a column order like i want, however theres and extreme caveat to this solution and that is, if the card text isnt very long, the next card will start on that same line, it'd be useful if i could find a way to make the text take up the full width of that row, but i havent seen anything to do that with.
I think the problem is that you're relying on PDFKit's text "flow" API/logic, and you're having problems when two cards are not big enough to flow across your columns and you get two cards in one column.
I'd say that what you really want is to create a table—based on your initial text sample.
PDFKit doesn't have a table API (yet), so you'll have to make one up for yourself.
Here's an approach where you figure out the dimensions of things:
the page size
the size of your cells of text (either manually choose for yourself, or use PDFKit to tell you how big some piece of text is)
margins
Then you use those sizes to calculate how many rows and columns of your text can fit on your page.
Finally you iterate of over columns then rows for each page, writing text into those column-by-row "coordinates" (which I track through "offsets" and use to calculate the final "position").
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create mock-up Cards for OP
const cards = [];
for (let i = 0; i < 100; i++) {
cards.push(`Card ${i + 1}`);
}
// Set a sensible starting point for each page
const originX = 50;
const originY = 50;
const doc = new PDFDocument({ size: 'LETTER' });
// Define row height and column widths, based on font size; either manually,
// or use commented-out heightOf and widthOf methods to dynamically pick sizes
doc.fontSize(24);
const rowH = 50; // doc.heightOfString(cards[cards.length - 1]);
const colW = 150; // doc.widthOfString(cards[cards.length - 1]); // because the last card is the "longest" piece of text
// Margins aren't really discussed in the documentation; I can ignore the top and left margin by
// placing the text at (0,0), but I cannot write below the bottom margin
const pageH = doc.page.height;
const rowsPerPage = parseInt((pageH - originY - doc.page.margins.bottom) / rowH);
const colsPerPage = 2;
var cardIdx = 0;
while (cardIdx < cards.length) {
var colOffset = 0;
while (colOffset < colsPerPage) {
const posX = originX + (colOffset * colW);
var rowOffset = 0;
while (rowOffset < rowsPerPage) {
const posY = originY + (rowOffset * rowH);
doc.text(cards[cardIdx], posX, posY);
cardIdx += 1;
rowOffset += 1;
}
colOffset += 1;
}
// This is hacky, but PDFKit adds a page by default so the loop doesn't 100% control when a page is added;
// this prevents an empty trailing page from being added
if (cardIdx < cards.length) {
doc.addPage();
}
}
// Finalize PDF file
doc.pipe(fs.createWriteStream('output.pdf'));
doc.end();
When I run that I get a PDF with 4 pages that looks like this:
Changing colW = 250 and colsPerPage = 3:
I'm using svg.js and svgdom on Node to generate SVG files. Here's my code:
// set up svg.js and svgdom
const { createSVGWindow } = require('svgdom');
const window = createSVGWindow();
const document = window.document;
const { SVG, registerWindow } = require('#svgdotjs/svg.js');
registerWindow(window, document);
const draw = SVG(document.element).size(100, 100);
// generate SVG text and title
var title = draw.element('title').words('noun');
var text = draw.text('text').add(title);
var width = text.length();
That last line throws TypeError: cannot read property 'style' of null in svgdom/main-require.cjs:3721:38.
This works when I do it in the browser; something about moving to Node and svgdom causes it to fail. Is there another way I can calculate the width of this text element, or a different way to attach the title to the text? (The title is being used to show additional information on hover.) Calling text.width() always returns 0.
I'm using svg.js 3.0.16 and svgdom 0.1.8. Should I open an issue on one of them? If so, which one?
I hope you are all well and safe.
In NodeJS, I wanted to create a grid on top of an image. Like this:
Image without grid
Image with grid
Can someone tell me, please, how can I achieve this (some library or something)?
After creating the grid, I would like to go square by square and check the information for each square. Does anyone have any ideas?
Thank you very much for your time!
The first answer has a native Cairo dependency... Below I used pureimage instead, which has Pure JS implementations of jpeg and png encoding.
static drawParallel = (canvas, step, isYAxis) => {
const c2d = canvas.getContext('2d')
const numberOfSteps = (canvas.width / step) | 0
const end = isYAxis ? canvas.height : canvas.width
console.log(`Steps: ${numberOfSteps}\n`)
c2d.lineWidth = 1.1 // PureImage hides thin lines
c2d.strokeStyle = 'rgba(255,192,203,0.69)'
for (let i = 1; i < numberOfSteps; i++) {
const from = i * step
const to = i * step
const mx = isYAxis ? [from, 0, to, end] : [0, from, end, to]
console.log(`Stroking ${mx[0]}, ${mx[1]} to ${mx[2]}, ${mx[3]}`)
c2d.beginPath()
c2d.moveTo(mx[0], mx[1])
c2d.lineTo(mx[2], mx[3])
c2d.stroke()
}
}
source: https://stackblitz.com/edit/feathersjs-7kqlyt
I would use Canvas. You can use it for all sorts of image jobs and editing. For example, you could get a transparent PNG image of the grid and lay it on:
const Canvas = require("canvas");
const canvas = Canvas.createCanvas(619, 319);
const ctx = canvas.getContext("2d");
let img = await Canvas.loadImage("./path/to/image.png");
ctx.drawImage(img, 0, 0, img.width, img.height);
let grid = await Canvas.loadImage("./path/to/grid.png");
ctx.drawImage(grid, 0, 0, canvas.width, canvas.height);
console.log(canvas.toDataURL());
I myself managed to get something like this.
I'm using Libtiff.net to write tiled images into a tiff file. It works ok if Photometric is set to RBG, but if I use YCbCr (in order to reduce file size), I get the error "Application trasferred too few scanlines". Relevant pieces of code:
private static Tiff CreateTiff()
{
var t = Tiff.Open(#"d:\test.tif", "w");
const long TIFF_SIZE = 256;
t.SetField(TiffTag.IMAGEWIDTH, TIFF_SIZE);
t.SetField(TiffTag.IMAGELENGTH, TIFF_SIZE);
t.SetField(TiffTag.TILEWIDTH, TIFF_SIZE);
t.SetField(TiffTag.TILELENGTH, TIFF_SIZE);
t.SetField(TiffTag.BITSPERSAMPLE, 8);
t.SetField(TiffTag.SAMPLESPERPIXEL, 3);
t.SetField(TiffTag.COMPRESSION, Compression.JPEG );
t.SetField(TiffTag.JPEGQUALITY, 80L);
t.SetField(TiffTag.PHOTOMETRIC, Photometric.YCBCR);
t.SetField(TiffTag.PLANARCONFIG, PlanarConfig.CONTIG);
return t;
}
private static void Go()
{
var tif = CreateTiff(true);
var bmp = Image.FromFile(#"d:\tile.bmp") as Bitmap;
var rect = new Rectangle(0, 0, bmp.Width, bmp.Height);
var size = bmp.Width;
var bands = 3;
var bytes = new byte[size * size * bands];
var bmpdata = bmp.LockBits(rect, ImageLockMode.ReadWrite, PixelFormat.Format24bppRgb);
try
{
System.Runtime.InteropServices.Marshal.Copy(bmpdata.Scan0, bytes, 0, bytes.Length);
}
finally
{
bmp.UnlockBits(bmpdata);
bmp.Dispose();
}
tif.WriteEncodedTile(0, bytes, bytes.Length);
tif.Dispose();
Console.ReadLine();
}
This same code works if I use Photometric.RGB. Even if I write a stripped image (t.SetField(TiffTag.ROWSPERSTRIP, ROWS_PER_STRIP), tif.WriteEncodedStrip(count, bytes, bytes.Length)) using Photometric.YCbCr everything works just fine.
Why can't I use YCbCr with a tiled image? Thanks in advance.
I finally found a workaround. I can set the tiff as RGB, encode the pixel data as YCbCr and then write it. The size of the output image is greatly reduced, as I desired, and then I can recover RGB values when I read the tiles. But it still isn't a perfect solution: any other software will recognize this tiff as RBG, so the colors are incorrect.
I thought of editing the photometric tag after writing the data, but every software I've tried either ignores the command or corrupts the file. How can I modify this tag without corrupting the image?