I am using puppeteer to take page screnshot of a particular width:
await page.setViewport({width: 320, height: 0})
await page.goto(url)
await page.screenshot({path: `screenshot.png`, fullPage: true});
The width of screenshot is exactly 320px. But is it possible to save scaled screenshot (e. g. 2 times larger)? Like in Developer Tools - I can set zoom 150% there.
You can use deviceScaleFactor on page.setViewport
await page.setViewport({width: 320, height: 0, deviceScaleFactor:2});
Related
I'm trying to make a composition on an animated gif. The overlay appears only for a small instance. I suppose that's because it's being applied only on one frame/page.
So my question is, how do I apply the overlay to all the pages/frames in the gif with sharp? This is the code:
let image = await sharp(req.file.buffer, { animated: true, pages: -1 });
const metadata = await image.metadata();
await image
.composite([
{ input: logo, left: Math.floor(metadata.width * 0.1), top: Math.floor(metadata.height * 0.1) },
])
.toFile(filepath);
Thanks in advance!
Same issue here, fixed by using tile and gravity.
.composite([
{
input: logo,
tile: true, gravity: 'northwest'
}
])
I want to make one image from multiples images in node js. I found the NPM package "spritesmith" for this. It combines the image and returns buffer representation of image, but I want to have more control over the final image. I want the input images to be display on specific position(pixel perfect) in final image, and also wants to downscale images. I have done some search, but found nothing about it. Can anyone please throw some possibillites for doing this thing. I want to combine about 10,000 images with 10 x 10 px for each image. What I'm planning is when a new image is uploaded by user, I want to add it to previously giant image.
Use the package Sharp.
images //your array of 10000 images
const emptyImage = await sharp({
create: {
width: 1000,
height: 1000,
channels: 3,
background: { r: 255, g: 255, b: 255 },
},
})
.composite(
images.map((image, index)=>({
input: image,
left: index%100,
top: parseInt(index/100),
width: 10,
height: 10,
}))
)
.toFormat('jpeg', { quality: 100 })
.toBuffer();
I have got a problem with the footerTemplate parameter of Puppeteer : the footer is only shown in the last page of the document. I want it to be displayed on every page of the document (well... a footer).
Maybe am I not using the parameters correctly ?
Here is my Puppeteer pdf generation :
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://localhost:8000/?' + parameters);
await page.pdf({
path: path,
format: 'A4',
displayHeaderFooter: true,
footerTemplate: '<h1>THIS IS A TEST</h1>'
});
await browser.close();
Thank you for your help !
Based on my experience with the lib, header / footer are goes behind the content of the page.
Try setting some margins to make them visible:
await page.pdf({
path: path,
format: 'A4',
displayHeaderFooter: true,
footerTemplate: '<h1>THIS IS A TEST</h1>',
margin : {
top: '20px',
right: '20px',
bottom: '20px',
left: '20px'
};
});
I came up to this problem as well, and margin settings for puppeteer did not work for me, as my whole webpage was a table. So even though I set bottom margin in puppeteer, the footer was still under the content. I fixed it with the following CSS:
#media print {
#page {
margin-bottom: 1.5rem;
}
}
This is a weird issue but was able to reproduce it.
When searching for text "THIS IS A TEST" it's found as often as the amount of pages in the PDF... But only on the last page the text "THIS IS A TEST" has a color.
Try CTRL+F or CMD+F and search for "THIS IS A TEST".
Look on a page within the document it's there but not shown (marked due to search):
But on the last page it's visible:
There's an open issue on gitHub related to yours puppeteer/issues/1853
I had this problem, I needed to change my margins from
marginTop: 100,
marginBottom: 70
to
margin: {
top: '100px',
bottom: '70px',
}
In a usual canvas css width and client width could be not equal to each other, how to get this on Fabricjs? As an example: I want 640*360px canvas on a page with 1280*720px image inside.
I know I could scale image, but dataUrl will give me a smaller picture, isn't it?
There is a solution. You could init Fabric.js with CSS sizes and then setDimensions with backstoreOnly flag or init with desired client size and use setDimensions with cssOnly flag.
Example #1:
var canvas = new fabric.Canvas('c', {width: 640, height: 360});
canvas.setDimensions({width: 1280, height: 720}, {backstoreOnly: true});
Example #2:
var canvas = new fabric.Canvas('c', {width: 1280, height: 720});
canvas.setDimensions({width: '640px', height: '360px'}, {cssOnly: true});
You can change the size of the canvas using the setWidth/setHeight properties of the canvas http://fabricjs.com/docs/fabric.StaticCanvas.html#setWidth
e.g.
canvas = new fabric.Canvas('c');
canvas.setWidth(640);
canvas.setHeight(360);
Though you should clarify what you mean.
I am generating pdf in nodejs using phantomjs. However, when I try to generate a large pdf (more than 1 A4 size page), it generates only two page pdf. One of the page contains all the matter and the other similar sized (very large) page is blank.
I am using the following code to generate the pdf:
phantom.create("--web-security=no", "--ignore-ssl-errors=yes",function(ph) {
return ph.createPage(function(page) {
return page.open(htmlfilepath, function(status) {
page.paperSize = { format: 'A4', orientation: 'portrait', border: '1cm' };
page.render(pdffilepath, function(){
ph.exit();
});
});
});
});
Can anyone tell the correct method to format pdf in phantomjs. Thanks.
Got it. Even though I did exactly according to many articles and tutorial online, I had to use change the following piece to code:
page.paperSize = { format: 'A4', orientation: 'portrait', border: '1cm' };
to this:
page.set('paperSize', { format: 'A4', orientation: 'portrait', border: '1cm'});
This may be because of the change in version from 1.x.x to 2.x.x.