Skip to content

Commit 0255819

Browse files
ramonszoramonszo
authored
Use puppeteer instead of phantomjs
1 parent e1cb491 commit 0255819

File tree

2 files changed

+86
-41
lines changed

2 files changed

+86
-41
lines changed

‎cli.js‎

Lines changed: 85 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const mkdirp = require('mkdirp');
2222
const ora = require('ora');
2323
const ProgressBar = require('progress');
2424
const screenshot = require('screenshot-stream');
25+
const puppeteer = require('puppeteer');
2526
const some = require('lodash/some');
2627
const typeis = require('type-is');
2728
const uniq = require('lodash/uniq');
@@ -60,29 +61,29 @@ const cli = meow(`
6061
$ dframe cat.png --frame "iPhone 6" --frame "iPhone 7"
6162
$ dframe cat.png --frame "iphone 6","iphone 7"
6263
`,
63-
{
64-
flags: {
65-
help: {
66-
alias: 'h',
67-
},
68-
delay: {
69-
default: 0,
70-
},
71-
devices: {
72-
default: false,
73-
},
74-
output: {
75-
type: 'string',
76-
alias: 'o',
77-
default: '.',
78-
},
79-
debug: {
80-
type: 'boolean',
81-
alias: 'd',
82-
default: false,
83-
},
64+
{
65+
flags: {
66+
help: {
67+
alias: 'h'
8468
},
69+
delay: {
70+
default: 0
71+
},
72+
devices: {
73+
default: false
74+
},
75+
output: {
76+
type: 'string',
77+
alias: 'o',
78+
default: '.'
79+
},
80+
debug: {
81+
type: 'boolean',
82+
alias: 'd',
83+
default: false
84+
}
8585
}
86+
}
8687
);
8788

8889
const framesRepo = cli.pkg.devDependencies['deviceframe-frames'];
@@ -118,7 +119,7 @@ if (cli.flags.frame) {
118119
distance: 100,
119120
maxPatternLength: 32,
120121
minMatchCharLength: 1,
121-
keys: ['name'],
122+
keys: ['name']
122123
});
123124

124125
const results = [];
@@ -163,7 +164,7 @@ Promise.resolve()
163164

164165
/* ------------------------------------------------------------------------- */
165166

166-
function init() {
167+
function init () {
167168
debug('Init...');
168169
// Add shadow suffix on to frame name
169170
frameData.forEach(frame => {
@@ -183,7 +184,7 @@ function init() {
183184
});
184185
}
185186

186-
function confirmInputs() {
187+
function confirmInputs () {
187188
const urls = cli.input.filter(f => isUrl(f));
188189

189190
// Find image files to frame from input
@@ -195,7 +196,7 @@ function confirmInputs() {
195196
});
196197
}
197198

198-
function chooseFrames() {
199+
function chooseFrames () {
199200
if (frames) return Promise.resolve(frames);
200201

201202
debug('Choosing frames');
@@ -208,7 +209,7 @@ function chooseFrames() {
208209
let frames = [];
209210
let prompt = null;
210211

211-
function prompter() {
212+
function prompter () {
212213
prompt = inquirer.prompt({
213214
type: 'autocomplete',
214215
name: 'frames',
@@ -219,7 +220,7 @@ function chooseFrames() {
219220
return Promise.resolve(
220221
frameData.map(f => f.name.toLowerCase()).filter(name => name.indexOf(input) !== -1)
221222
);
222-
},
223+
}
223224
});
224225

225226
prompt.then(answers => {
@@ -243,7 +244,7 @@ function chooseFrames() {
243244
});
244245
}
245246

246-
function frameImages(files, urls, frames) {
247+
function frameImages (files, urls, frames) {
247248
let promises = files.map(file => {
248249
return frames.map(frame => {
249250
return frameIt(file, frame);
@@ -270,7 +271,7 @@ function frameImages(files, urls, frames) {
270271
// });
271272
// }
272273

273-
function globImageFiles(inputs) {
274+
function globImageFiles (inputs) {
274275
if (!inputs || inputs.length === 0) return Promise.resolve([]);
275276

276277
const ps = inputs.map(file => {
@@ -280,7 +281,7 @@ function globImageFiles(inputs) {
280281
return Promise.all(ps).then(results => flatten(results));
281282
}
282283

283-
function downloadFrames(frames) {
284+
function downloadFrames (frames) {
284285
debug('Downloading frames');
285286
// console.log('frames', frames);
286287
const promises = [];
@@ -302,14 +303,14 @@ function downloadFrames(frames) {
302303
return Promise.all(promises).then(results => flatten(results));
303304
}
304305

305-
function downloadFrame(frame) {
306+
function downloadFrame (frame) {
306307
debug(`Downloading frame ${frame.url}`);
307308

308309
const bar = new ProgressBar(`Downloading frame ${chalk.green(frame.name)} [:bar] :rate/bps :percent :etas`, {
309310
complete: '=',
310311
incomplete: ' ',
311312
width: 20,
312-
total: 100,
313+
total: 100
313314
});
314315

315316
bar.tick();
@@ -322,8 +323,8 @@ function downloadFrame(frame) {
322323
return new Promise((resolve, reject) => {
323324
got.stream(frame.url, {
324325
headers: {
325-
'user-agent': `deviceframe/${cli.pkg.version} (${cli.pkg.repo})`,
326-
},
326+
'user-agent': `deviceframe/${cli.pkg.version} (${cli.pkg.repo})`
327+
}
327328
})
328329
.on('end', () => {
329330
bar.tick(100);
@@ -342,7 +343,7 @@ function downloadFrame(frame) {
342343
});
343344
}
344345

345-
function frameIt(img, frameConf) {
346+
function frameIt (img, frameConf) {
346347
debug('Framing images');
347348

348349
// TODO: use filenamify here?
@@ -373,14 +374,16 @@ function frameIt(img, frameConf) {
373374
if (typeis(response, ['image/*'])) return response.body;
374375

375376
// Scale image size for device pixel density
376-
const w = Math.floor(frameConf.frame.width / (frameConf.pixelRatio || 1));
377-
const h = Math.floor(frameConf.frame.height / (frameConf.pixelRatio || 1));
377+
const pixelRatio = frameConf.pixelRatio;
378+
const w = Math.floor(frameConf.frame.width / 1);
379+
const h = Math.floor(frameConf.frame.height / 1);
378380
const dim = [w, h].join('x');
379381

380-
const spinner = ora(`Screenshotting ${imgUrl} at ${dim}`).start();
382+
const spinner = ora(`Screenshoting ${imgUrl} at ${dim}`).start();
381383

382384
// TODO: need to dynamically choose device user-agent from a list, or store them with the frames
383385
const ua = 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1';
386+
/*
384387
const stream = screenshot(imgUrl, dim, { crop: false, userAgent: ua, delay: cli.flags.delay })
385388
.on('error', err => {
386389
spinner.fail();
@@ -389,6 +392,47 @@ function frameIt(img, frameConf) {
389392
.on('end', () => spinner.succeed());
390393
391394
const bufPromise = getStream.buffer(stream);
395+
*/
396+
397+
// console.log('width', w, h, frameConf);
398+
399+
let delay = 1000 || cli.flags.delay * 1000;
400+
const bufPromise = new Promise((resolve, reject) => {
401+
puppeteer.launch().then(browser => {
402+
browser.newPage()
403+
.then(page => {
404+
page.goto(imgUrl);
405+
406+
page.on('load', () => {
407+
// console.log('page loaded');
408+
409+
setTimeout(() => {
410+
page.setViewport({'width': w, 'height': h, 'deviceScaleFactor': pixelRatio });
411+
page.screenshot().then((buffer) => {
412+
// console.log('screenshoted');
413+
414+
spinner.succeed();
415+
browser.close();
416+
417+
resolve(buffer);
418+
}).catch((err) => {
419+
// console.log('errrou', err);
420+
421+
spinner.fail();
422+
browser.close();
423+
424+
reject(err);
425+
});
426+
}, delay);
427+
});
428+
})
429+
.catch((err) => {
430+
spinner.fail();
431+
reject(err);
432+
});
433+
});
434+
});
435+
392436
// bufPromise.then(buf => {
393437
// fs.writeFileSync('test.png', buf, { encoding: 'binary' });
394438
// });
@@ -419,7 +463,7 @@ function frameIt(img, frameConf) {
419463

420464
return Promise.all([
421465
Jimp.read(framePath),
422-
Jimp.read(imgData),
466+
Jimp.read(imgData)
423467
]);
424468
})
425469
// Resize largest image to fit the other
@@ -503,12 +547,12 @@ function frameIt(img, frameConf) {
503547
// // TODO: write settings to ~/.deviceframe/settings.json
504548
// }
505549

506-
function error(msg, usage) {
550+
function error (msg, usage) {
507551
if (usage) console.log(cli.help);
508552
console.error('\n' + logSymbols.error + ' ' + chalk.red(msg));
509553
process.exit(1);
510554
}
511555

512-
function debug(...args) {
556+
function debug (...args) {
513557
if (cli.flags.debug) console.log(chalk.green(...args));
514558
}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"mkdirp": "^0.5.1",
5151
"ora": "^1.3.0",
5252
"progress": "^2.0.0",
53+
"puppeteer": "^1.5.0",
5354
"screenshot-stream": "^4.2.0",
5455
"type-is": "^1.6.15"
5556
},

0 commit comments

Comments
 (0)