From a781362550b0332a96adcf5d1e989e8d68aa23b8 Mon Sep 17 00:00:00 2001 From: jysperm Date: Thu, 12 Apr 2018 15:37:23 +0800 Subject: [PATCH 1/2] :sparkles: Snapcat by chrome-headless --- .gitignore | 1 + .leanignore | 4 ++++ README.md | 2 ++ leanengine.yaml | 3 +++ package.json | 8 +++++++ server.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 76 insertions(+) create mode 100644 .gitignore create mode 100644 .leanignore create mode 100644 README.md create mode 100644 leanengine.yaml create mode 100644 package.json create mode 100644 server.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e33609d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.png diff --git a/.leanignore b/.leanignore new file mode 100644 index 0000000..fc85c37 --- /dev/null +++ b/.leanignore @@ -0,0 +1,4 @@ +.git/ +.avoscloud/ +.leancloud/ +node_modules/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..6fb6339 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# Snapcat +一个使用 chrome-headless 的截图服务。 diff --git a/leanengine.yaml b/leanengine.yaml new file mode 100644 index 0000000..2c17431 --- /dev/null +++ b/leanengine.yaml @@ -0,0 +1,3 @@ +systemDependencies: + - chrome-headless + - fonts-wqy diff --git a/package.json b/package.json new file mode 100644 index 0000000..5003faf --- /dev/null +++ b/package.json @@ -0,0 +1,8 @@ +{ + "engines": { + "node": "8" + }, + "dependencies": { + "puppeteer": "^1.2.0" + } +} diff --git a/server.js b/server.js new file mode 100644 index 0000000..7976075 --- /dev/null +++ b/server.js @@ -0,0 +1,58 @@ +var fs = require('fs'); +var url = require('url'); +const puppeteer = require('puppeteer'); + +require('http').createServer(function(req, res) { + const urlInfo = url.parse(req.url, true) + + if (urlInfo.pathname !== '/') { + res.statusCode = 404; + return res.end(); + } + + if (urlInfo.query.url) { + makeScreenshot(urlInfo.query.url).then( (filename) => { + fs.readFile(filename, function(err, buffer) { + if (err) { + res.end(err.message); + } else { + res.setHeader('Content-Type', 'image/png'); + res.end(buffer); + } + }); + }).catch( err => { + console.log(err) + res.end(err.message); + }); + } else { + res.end('You can visit https://snapcat.leanapp.cn/?url=https://leancloud.cn/docs'); + } +}).listen(3000); + +var counter = 0; + +async function makeScreenshot(url) { + const filename = `./${counter++}.png`; + + const browser = await puppeteer.launch({ + executablePath: '/usr/bin/google-chrome', + args: ['--no-sandbox', '--disable-setuid-sandbox'] + }); + + const page = await browser.newPage(); + await page.goto(url); + + await page.setViewport({ + width: 1440, + height: 900 + }); + + await page.screenshot({ + fullPage: true, + path: filename + }); + + await browser.close(); + + return filename; +} From 165b1948a6a69c5cd6d963f1c860baba214f90fb Mon Sep 17 00:00:00 2001 From: jysperm Date: Mon, 14 May 2018 15:37:58 +0800 Subject: [PATCH 2/2] :sparkles: `node-canvas` Demo --- README.md | 3 +-- leanengine.yaml | 3 +-- package.json | 2 +- server.js | 62 +++++++++++++------------------------------------ 4 files changed, 19 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 6fb6339..20df422 100644 --- a/README.md +++ b/README.md @@ -1,2 +1 @@ -# Snapcat -一个使用 chrome-headless 的截图服务。 +# Node Canvas diff --git a/leanengine.yaml b/leanengine.yaml index 2c17431..af2c77f 100644 --- a/leanengine.yaml +++ b/leanengine.yaml @@ -1,3 +1,2 @@ systemDependencies: - - chrome-headless - - fonts-wqy + - node-canvas diff --git a/package.json b/package.json index 5003faf..da37b60 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,6 @@ "node": "8" }, "dependencies": { - "puppeteer": "^1.2.0" + "canvas": "^1.6.10" } } diff --git a/server.js b/server.js index 7976075..68395a7 100644 --- a/server.js +++ b/server.js @@ -1,6 +1,5 @@ -var fs = require('fs'); -var url = require('url'); -const puppeteer = require('puppeteer'); +const url = require('url'); +const Canvas = require('canvas'); require('http').createServer(function(req, res) { const urlInfo = url.parse(req.url, true) @@ -10,49 +9,20 @@ require('http').createServer(function(req, res) { return res.end(); } - if (urlInfo.query.url) { - makeScreenshot(urlInfo.query.url).then( (filename) => { - fs.readFile(filename, function(err, buffer) { - if (err) { - res.end(err.message); - } else { - res.setHeader('Content-Type', 'image/png'); - res.end(buffer); - } - }); - }).catch( err => { - console.log(err) - res.end(err.message); - }); - } else { - res.end('You can visit https://snapcat.leanapp.cn/?url=https://leancloud.cn/docs'); - } -}).listen(3000); - -var counter = 0; - -async function makeScreenshot(url) { - const filename = `./${counter++}.png`; + const canvas = new Canvas(200, 200); + const ctx = canvas.getContext('2d'); - const browser = await puppeteer.launch({ - executablePath: '/usr/bin/google-chrome', - args: ['--no-sandbox', '--disable-setuid-sandbox'] - }); + ctx.font = '30px Impact'; + ctx.rotate(.1); + ctx.fillText('Awesome!', 50, 100); - const page = await browser.newPage(); - await page.goto(url); + var te = ctx.measureText('Awesome!'); + ctx.strokeStyle = 'rgba(0,0,0,0.5)'; + ctx.beginPath(); + ctx.lineTo(50, 102); + ctx.lineTo(50 + te.width, 102); + ctx.stroke(); - await page.setViewport({ - width: 1440, - height: 900 - }); - - await page.screenshot({ - fullPage: true, - path: filename - }); - - await browser.close(); - - return filename; -} + res.setHeader('Content-Type', 'text/html'); + res.end(''); +}).listen(3000);