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.
Related
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.
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.
I have asked the question on the repository directly, but in my experience SO is more reactive.
Hey there,
I am trying to create a pdf from photos using pdfkit.
Depending on whether an image is in landscape or portait mode, I want to turn the image around.
This basically means the following (in typescript) :
function toPostscriptPoint(mm: number) {
return mm * 2.8346456693;
}
const document = new PDFDocument({
size: [toPostscriptPoint(156), toPostscriptPoint(106)],
});
document.pipe(fs.createWriteStream('output.pdf'));
document.save();
document.rotate(90);
document.image(
'photos/sample.jpeg',
{ width: toPostscriptPoint(150), fit: [toPostscriptPoint(150), toPostscriptPoint(100)] });
document.restore();
document.end();
What happens though is that the pdf renders completely white. I do see however that something is happening, because the pdf has the size of the input image.
Is rotation for images not supported? What would be possible alternatives? I would like to avoid having to rewrite my files before putting them in the pdf.
Thanks
Alright, after investigation, I can answer my own question :).
I could see that the images were in the pdf somehow because of the size of the file so I dived deeper.
What happened was that the image was rendered out of the viewport. This was due to multiple things:
By default, the origin of a page after rotation in pdfkit is the center of the page! ( See the doc for more info)
The origin is rotated together with the transformation.
The x and y in the image method are actually inverted.
So after getting all this right, the following code shows the image as expected :
function toPostscriptPoint(mm: number) {
return mm * 2.8346456693;
}
const document = new PDFDocument({
size: [toPostscriptPoint(156), toPostscriptPoint(106)],
});
document.pipe(fs.createWriteStream('output.pdf'));
document.save();
document.rotate(90, {origin : [0, 0]});
document.image(
'photos/sample.jpeg',
toPostscriptPoint(0),
toPostscriptPoint(-150),
{ width: toPostscriptPoint(150), height: toPostscriptPoint(100) });
document.restore();
document.end();
Note the :
origin argument in the rotation
toPostscriptPoint(-150) actually takes into account the position of the origin, and corresponds to the X axis.
Hope that helps some later on :).
Its because taking picture from camera , if picture ISO is less than 100 it will be automatically rotated , take picture with iso more than or equal to 100 to avoid autorotation.
I've been trying to do SVG scaling with PIXI but the results are not really what I expected them to be. As you can see in the image, the debian logo, which is a SVG file, seems to be blurry and edgy. Am I writing my code wrong:
Refined from https://github.com/kevguy/D3-Svg-Comparison/blob/master/src/components/SvgCompare.vue:
// initialization
this.renderer = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb})
document.getElementById('svg-canvas').appendChild(this.renderer.view)
this.container = new PIXI.Container()
this.stage = this.renderer.stage
this.stage.addChild(this.container)
// appending the svg file
const texture = PIXI.Texture.fromImage(this.chosenImage)
this.svg = new PIXI.Sprite(texture)
this.svg.anchor.x = 0.8
this.svg.anchor.y = 0.8
this.svg.position.x = 400
this.svg.position.y = 300
this.svg.scale.x = this.selectedScale
this.svg.scale.y = this.selectedScale
this.container.addChild(this.svg)
chosenImage is the svg file retrieved by using import * as choesnImage from 'the-file-path'
selectedScale is the selected scaling value which can be changed dynamically thanks to VueJS
You can check out my work here and its corresponding GitHub repo
The bunny logo is to verify when the scaling happens, it only applies to the SVG not the whole canvas.
According to this issue you need to load svg like this to generate scaled svg texture.
PIXI.Texture.fromImage(this.chosenImage, undefined, undefined, newVal)
And need to clean texture cache then create new texture for every new scale change.
PIXI.utils.clearTextureCache()
Modified SvgCompare.vue on gist
Can someone tell me how can I view an RGBA image? I just want a tool that I can display an RGBA image with!
I have written a code, which outputs only RGBA format. I just want to verify if my code worked, and just want to find a simple tool to view this image.
I wasn't able to come across a software to be able to display a RGBA image.
Thanks in advance.
RGBA files only contain raw channel data. The binary data will not have enough information to display an image (ie. width,height,depth, &tc).
If you know the image dimensions of each .rgba file, you should be able to work with the data. Here's an example of viewing raw date in javascript.
var fr = new FileReader(),
myWidth = 200,
myHeight = 200;
fr.onload = function(frEvent) {
var canvasElement = document.getElementById("myCanvas"),
ctx = canvasElement.getContext("2d"),
blob = ctx.createImageData(myWidth,myHeight),
index = 0;
while(index < frEvent.target.result.length)
blob.data[index] = frEvent.target.result.charCodeAt(index++);
ctx.putImageData(blob,0,0);
}
Imagemagick will be able to display raw RGBA data. Assuming that each color sample is 8 bits.
display -size 200x200 -depth 8 mySimpleData.rgba