How to place image on right corner of pdf using node js? - node.js

I have one pdf file and one image file which is the signature of the client. I need to place the client signature image on the top right corner of every page of pdf. This whole process is in node js so I have used the pdf-lib npm package to attach image on pdf. The current issue I'm unable to place the image on the top-right corner.
Below is the logic which I used to set an image on the top-right corner of the pdf but this logic is not true for every case in some cases when the width of the image or pdf changes then it's not worked as expected. Sometimes images are getting too much small or sometimes too much large.Just because I set fix height and width. As I don't know how to calculate it dynamically
const pages = pdfDoc.getPages();
for (let i = 0; i < pdfDoc.getPageCount(); i++) {
let imagePage='';
imagePage = pdfDoc.getPage(i);
console.log(i+1)
console.log(imagePage.getWidth())
let xx=imagePage.getWidth()
console.log(imagePage.getHeight())
console.log(img.width)
console.log(img.height)
let yy=imagePage.getHeight()
imagePage.drawImage(img, {
x: xx-150,
y: yy-70,
width: 70,
height: 70
})
}
Please check console values below
595.5 ​​​​​at ​​​​​​​​imagePage.getWidth()​​​
842.2499787 ​​​​​at ​​​​​​​​imagePage.getHeight()​​​
1200 ​​​​​at ​​​​​​​​img.width​​​
700 ​​​​​at ​​​​​​​​img.height
please check the above image where I attached the signature to pdf but in this case, the signature image is not properly visible so how can I set the image to pdf on the top-right corner?
How can I calculate the x and y position dynamically for any pdf?

I got the solution to get dynamic x and y values to set an image on the top-right corner of the pdf
let xx=imagePage.getWidth();
console.log(imagePage.getHeight());
console.log("[PAGE_HEIGHT]",imagePage.getHeight());
const imgHeight = img.height;
const imgWidth = img.width;
console.log("[SIGNATURE_IMAGE_WIDTH]",img.width);
console.log("[SIGNATURE_IMAGE_HEIGHT]",img.height);
const marginX = 50;
let yy=imagePage.getHeight();
imagePage.drawImage(img, {
x: xx -marginX-imgWidth,
y: yy- marginX-imgHeight,
width: imgWidth,
height: imgHeight
})
margin is a fixed value to move an image from the top and right sides to get a proper view.
I have removed image height and width from the actual page width and height that will return top right corner.

Related

Photoshop Script Resize Image, does not update the resolution

I have an image when manually resized to width 1000pts the resolution comes to 261.5pixels/inch
Original Image Dimensions
Manual Update width to 1000pts
The resolution downgraded to 261.5 px/in
When i try the same programmatically with js script the width changes but resolution is same as of the original image
JS Code
document.resizeImage(UnitValue(parseInt(row.width),"pt"), null, null); //working
where row.width = 1000
Image dimensions after executing the js script
How to calculate the resolution of the image automatically and set to 261.5px/inch
The new resolution should be manually calculated.
newResolution = document.resolution * (originalWidth / parseInt(row.width));
document.resizeImage(null, null, newResolution, ResampleMethod.NONE);
document.resizeImage(UnitValue(parseInt(row.width), "pt"), null, null);
If the width is changed, the height will be changed programatically, which caused an impression, ResampleMethod.NONE will set the resolution too.
Not sure if you want to shrink the image or the canvas. I've got with the former.
Use app.activeDocument.resizeImage with a width, height and resolution of your image.
resizemeth = ResampleMethod.BICUBIC;
res = 72;
w = 1000;
h = 673;
app.activeDocument.resizeImage(w, h, res, resizemeth);
Also check what units you are using.
alert(app.preferences.rulerUnits);

PDFKit JS image grows bigger when placed in PDF

I have an image (a strange image, but the marks in the corner just help me determine where the corners are):
However when I create a PDF using PDFKit, I get this (a print preview of the A5 PDF it generates):
The image is originally from a HTML canvas (w: 1000px, h: 709px), I do the following:
const canvasImage = canvas.toDataURL('image/png');
and send it to the backend. In the backend I do this:
const pdfDoc = new PDFDocument({
// autoFirstPage: false,
layout: 'landscape',
size: 'a5'
});
// const img = pdfDoc.openImage(base64Image);
// pdfDoc.addPage({size: [img.width, img.height]});
pdfDoc.image(base64Image, 0, 0, {align: 'center', width: 2480, height: 1748});
pdfDoc.pipe(awsUpload(`order-${orderNumber}.pdf`));
pdfDoc.end();
I have tried all sorts of variations on the image size, but it always makes it much much bigger than the A5 itself.
I have even tried converting it to 300dpi on the frontend using shuttershock's changeDPI function
const canvasImage = canvas.current.toDataURL('image/png');
const canvasImage300Dpi = changeDpiDataUrl(canvasImage, 300);
Still no luck :(.
How do I get the dimensions of the image to fit within the A5 pdf?
You are using a hardcoded image size.
Use your A5 size [419.53, 595.28] as your image width. In your case I would say: 595.28
Don't use height to scale proportional.

How to create zoomable text

I am looking to add zoomable text to the rendered image in OpenSeadragon. The desired functionality is that when you are zoomed out, the text is very small, and as you zoom in, the text increases in size.
I have tried to add text to an overlay div DOM element. This adds text, but as you zoom out, the size of the div gets smaller but the text doesn't. The text gets squeezed to multiple lines.
I use the Render2 class in Angular 7 to manipulate the DOM, but this can be done in any framework/library:
// create the DOM element need for SeaDragon's overlay
let div = this.renderer.createElement('div');
const text = this.renderer.createText(`x: ${xaxis}, y: ${yaxis}`);
// append text to div element
this.renderer.appendChild(div, text);
// add id for Seadragon overlay creation and styling of overlay
this.renderer.setAttribute(div, 'id', overlayname);
this.renderer.setAttribute(div, 'class', 'image-ruler');
// now append the div tag to ViewChild div
this.renderer.appendChild(this.singleOverlay.nativeElement, div);
I expect the text to zoom with the image. Is this possible?
I figured out how to do it. I saw this example that uses an svg plugin so d3 can be used to draw an overlay. After downloading this plugin, I noticed that when I printed text on the screen, it was incredibly large. Too large to read.
As d3 at this zoom level uses the scale of 0-1 for the size of the image, I had to divide the scale by the width of my image.
var p = viewer.viewport.pixelFromPoint(new OpenSeadragon.Point(0, 0), true);
var zoom = viewer.viewport.getZoom(true);
var rotation = viewer.viewport.getRotation();
var imageSize = viewer.world.getItemAt(0).getContentSize();
var scale = viewer.viewport._containerInnerSize.x * zoom / imageSize.x;
g.attr('transform',
'translate(' + p.x + ',' + p.y + ') scale(' + scale + ') rotate(' + rotation + ')');
I then reimplemented the plugin's resize function in my component as not to modify a node module. The result was small text on my enormous image that was readable when you zoom in.

How to find bit length of text with specific font and font size

I'm developing NativeScript JavaScript code to create dynamic text marker for maps. I have the code working that creates a marker for a specific string. My next step is to take any given string, determine its height and width in bits, and create the marker sized to contain the text.
My problem is finding the size of the text, given the text string itself, the font size, and the font family.
It looks like getMeasuredWidth could work, except that the string must already be loaded on a page before that function will return a value. In my case, I simply need to compute the size; the text won't otherwise appear as such on a page (the text in the marker becomes an image).
Is there a way to do this?
var bmp = BitmapFactory.create(200);
bmp.dispose(function (b) {
try {
b.drawRect(
"100,34", // size
'0,0', // upper-left coordinate
KnownColors.Black, // border color
KnownColors.Cornsilk // fill color
);
b.writeText(
"Parking",
"2,25",
{ color: KnownColors.Black, size: 8, name: 'fontawesome-webfont', });
...
In the code above, the width of "100" of the bounding rectangle actually represents the bit width of "Parking" with a small amount of padding. What I want to does calculate the rectangle's height and width and not hard-code it.
Try this, finding label size without adding it to Page upon button click
export function onFindButtonTap(args: EventData) {
const button = <any>args.object;
const label = new Label();
label.text = "Hello, found my size?"
label.fontSize = 20;
(<any>label)._setupAsRootView(button._context);
label.onLoaded();
label.measure(0, 0);
console.log(`Width : ${label.getMeasuredWidth()} x Height : ${label.getMeasuredHeight()}`);
}
Playground Sample
Note: I didn't get a chance to test it with iOS yet, let me know if you hit any issues.

How to make a button with dynamic text using Phaser?

What is the workaround to create 3 buttons with the same design but different texts (short text, medium length text, long text):
a) do I need 3 different images as a background ? What if i don’t know the length of the text ?
b) or I can use a single image and shrink/stretch it horizontally/vertically somehow when a text needs more/less space to fit in?
I hope i don’t need hundreds of images for each button :)
I’m just a beginner. What is the best practice ?
Here is how I create a responsive button and text:
buttonSprite2 = game.add.sprite(352, 76,'button');
buttonSprite2.position.set(200, 0);
buttonSprite2.inputEnabled = true;
buttonSprite2.events.onInputDown.add(listener2, this);
var style = { font: "32px Arial", fill: "#ffffff", wordWrap: true, align: "center", backgroundImage:'button'};
buttonText2 = game.add.text(0, 0, "stop text", style);
buttonText2.wordWrapWidth = game.world.width - 400;
// trying to center the text within the button
buttonText2.position.set(buttonSprite2.x + 100, buttonSprite2.y+15);
// trying to make the button responsive
if(buttonText2.width < game.world.width - 400){
buttonSprite2.width = buttonText2.width + 200;
}
else{
buttonSprite2.width = game.world.width - 300;
buttonSprite2.height = buttonText2.height + 30;
}
You need to load(in preload function) image only once. But you need to add(in create function) 3 images for 3 buttons.
For changing size of this button images according to text size. First you add image then add text. Now, after adding text, check for height or width of that text object and change size of the button image according to the height and width of text.
You may define seperate function to do this. So, you can get rid of redundant code if you have too many buttons.

Resources