:sparkles: crop webshot

Signed-off-by: LI JIAHAO <lijiahao99131@gmail.com>

dist/webshot.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const log4js = require("log4js");
 const webshot = require("webshot");
 const read = require("read-all-stream");
+const pngjs_1 = require("pngjs");
 const logger = log4js.getLogger('webshot');
 logger.level = 'info';
 function renderWebshot(url, height) {
@@ -17,16 +18,36 @@ function renderWebshot(url, height) {
             quality: 100,
             customCSS: 'html{zoom:2}header{display:none!important}',
         };
-        const renderStream = webshot(url, options);
-        read(renderStream, 'base64').then(data => {
-            resolve(data);
+        webshot(url, options).pipe(new pngjs_1.PNG({
+            filterType: 4
+        }))
+            .on('parsed', function () {
+            let boundary = null;
+            for (let y = 0; y < this.height; y++) {
+                const x = 0;
+                let idx = (this.width * y + x) << 2;
+                if (this.data[idx] !== 255) {
+                    boundary = y;
+                    break;
+                }
+            }
+            if (boundary != null) {
+                this.data = this.data.slice(0, (this.width * boundary) << 2);
+                this.height = boundary;
+                read(this.pack(), 'base64').then(data => {
+                    resolve({ data, boundary });
+                });
+            }
+            else {
+                resolve({ data: '', boundary });
+            }
         });
     });
     return promise.then(data => {
-        if (height < 2048)
+        if (data.boundary != null)
             return renderWebshot(url, height * 2);
         else
-            return data;
+            return data.data;
     });
 }
 /*function fetchImage(): Promise<string> {

package.json

@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@types/node": "^10.5.1",
+    "@types/pngjs": "^3.3.2",
     "tslint": "^5.10.0",
     "tslint-config-prettier": "^1.13.0"
   }

src/webshot.ts

@@ -1,12 +1,13 @@
 import * as log4js from 'log4js';
 import * as webshot from 'webshot';
 import * as read from 'read-all-stream';
+import {PNG} from 'pngjs';
 
 const logger = log4js.getLogger('webshot');
 logger.level = 'info';
 
 function renderWebshot(url: string, height: number): Promise<string> {
-  let promise = new Promise<string>(resolve => {
+  let promise = new Promise<{ data: string, boundary: null | number }>(resolve => {
     const options = {
       windowSize: {
         width: 1080,
@@ -17,14 +18,33 @@ function renderWebshot(url: string, height: number): Promise<string> {
       quality: 100,
       customCSS: 'html{zoom:2}header{display:none!important}',
     };
-    const renderStream = webshot(url, options);
-    read(renderStream, 'base64').then(data => {
-      resolve(data);
-    });
+    webshot(url, options).pipe(new PNG({
+      filterType: 4
+    }))
+      .on('parsed', function () {
+        let boundary = null;
+        for (let y = 0; y < this.height; y++) {
+          const x = 0;
+          let idx = (this.width * y + x) << 2;
+          if (this.data[idx] !== 255) {
+            boundary = y;
+            break;
+          }
+        }
+        if (boundary != null) {
+          this.data = this.data.slice(0, (this.width * boundary) << 2);
+          this.height = boundary;
+          read(this.pack(), 'base64').then(data => {
+            resolve({ data, boundary });
+          });
+        } else {
+          resolve({ data: '', boundary });
+        }
+      });
   });
   return promise.then(data => {
-    if (height < 2048) return renderWebshot(url, height * 2);
-    else return data;
+    if (data.boundary != null) return renderWebshot(url, height * 2);
+    else return data.data;
   })
 }
 

yarn.lock

@@ -2,10 +2,16 @@
 # yarn lockfile v1
 
 
-"@types/node@^10.5.1":
+"@types/node@*", "@types/node@^10.5.1":
   version "10.5.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.5.1.tgz#d578446f4abff5c0b49ade9b4e5274f6badaadfc"
 
+"@types/pngjs@^3.3.2":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@types/pngjs/-/pngjs-3.3.2.tgz#8ed3bd655ab3a92ea32ada7a21f618e63b93b1d4"
+  dependencies:
+    "@types/node" "*"
+
 addressparser@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/addressparser/-/addressparser-1.0.1.tgz#47afbe1a2a9262191db6838e4fd1d39b40821746"