Capture webpage with device frame #27
Conversation
| @@ -5,6 +5,8 @@ const fileUrl = require('file-url'); | |||
| const puppeteer = require('puppeteer'); | |||
| const devices = require('puppeteer/DeviceDescriptors'); | |||
| const toughCookie = require('tough-cookie'); | |||
| const sharp = require('sharp'); | |||
There was a problem hiding this comment.
I'm not a big fan of depending on sharp as it's a native Node.js addon, which all kinds of problems.
Instead, why can't we just use Canvas in the renderer to combine the images?
There was a problem hiding this comment.
In node.js, there is no canvas API. Are you suggesting to use this - https://www.npmjs.com/package/canvas
I can use this too. Whatever you suggest !!
There was a problem hiding this comment.
Are you suggesting the following?
- Create a local html webpage and open it.
- The page will load an image(device frame) and the main page in an iframe.
- Take Screenshot using Canvas API.
There was a problem hiding this comment.
No, using Puppeteer. You already have a browser at your disposal.
Could maybe use https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
|
Can you add some more frames? Especially the latest Android Pixel. |
I have done a "Google Image search" to get the |
|
I don't want to tweet about it. I'm sure you can find something. Some things I found from 30 seconds of googling: |
|
@nsisodiya Still interested in finishing this? |
|
Hi, sorry for delayed response. |
|
@nsisodiya @sindresorhus , honestly waiting this feature , pupeter is a great tool but only for GUI(desktop env) not the servers, sorry i'm not too much expert to help you guys . |
Fixes #26