simplify screenshot workflow for webkit

dist/webshot.js

@@ -98,7 +98,7 @@ class Webshot extends CallableInstance {
                     })
                         .then(() => page.addStyleTag({ content: 'nav,footer,main>*>*+*,header div>[class$=" "]>[class]+div,main button,canvas,main section,main section+div>ul>:not(div),' +
                             'main section+div>ul>div [role="button"],section+div h2,article>*>:first-child+*>*>:first-child+*{display:none!important} ' +
-                            'section+div{overflow:hidden} section+*>*{position:relative!important} article{border-bottom:1px solid!important} ' +
+                            'section+div{overflow:hidden} section+*>*{position:relative!important} main>div{margin-bottom:0!important}' +
                             'main section+div>ul{width:auto!important;padding:16px 0!important} main section+div>ul>div>li{padding:6px 2px 12px!important}',
                     }))
                         .then(() => page.addStyleTag({ content: '*{font-family:-apple-system,".Helvetica Neue DeskInterface",Hiragino Sans,Hiragino Sans GB,sans-serif!important}' +
@@ -120,47 +120,22 @@ class Webshot extends CallableInstance {
                     }))
                         .then(() => (0, utils_1.chainPromises)(morePostProcessings.map(func => () => func(page))))
                         .then(() => (0, util_1.promisify)(setTimeout)(getTimeout()))
-                        .then(() => page.screenshot())
+                        .then(() => page.$('article').then(article => article.screenshot()))
                         .then(screenshot => {
                         new pngjs_1.PNG({
                             filterType: 4,
                             deflateLevel: 0,
                         }).on('parsed', function () {
-                            const idx = (x, y) => (this.width * y + x) << 2;
-                            let boundary = null;
-                            for (let y = this.height - 1; y > this.height - 3840; y -= zoomFactor) {
-                                if (this.data[idx(zoomFactor, y)] <= 38 &&
-                                    this.data[idx(zoomFactor, y)] === this.data[idx(this.width - zoomFactor, y)] &&
-                                    this.data[idx(zoomFactor, y + zoomFactor)] === this.data[idx(zoomFactor, y - 2 * zoomFactor)]) {
-                                    boundary = y - 1;
-                                    break;
-                                }
-                            }
-                            if (boundary !== null) {
-                                logger.info(`found boundary at ${boundary}, cropping image`);
-                                this.data = this.data.slice(0, idx(this.width, boundary));
-                                this.height = boundary;
-                                sharpToFile(jpeg(this.pack())).then(path => {
-                                    logger.info(`finished webshot for ${url}`);
-                                    resolve({ path, boundary });
-                                });
-                            }
-                            else if (height >= 8 * 1920) {
-                                logger.warn('too large, consider as a bug, returning');
-                                sharpToFile(jpeg(this.pack())).then(path => {
-                                    resolve({ path, boundary: 0 });
-                                });
-                            }
-                            else {
-                                logger.info('unable to find boundary, try shooting a larger image');
-                                resolve({ path: '', boundary });
-                            }
+                            sharpToFile(jpeg(this.pack())).then(path => {
+                                logger.info(`finished webshot for ${url}`);
+                                resolve({ path, boundary: this.height });
+                            });
                         }).parse(screenshot);
                     })
                         .catch(err => {
                         if (err instanceof Error && err.name !== 'TimeoutError')
                             throw err;
-                        logger.error(`error shooting webshot for ${url}, could not load web page of tweet`);
+                        logger.error(`error shooting webshot for ${url}, could not load web page of post`);
                         resolve({ path: '', boundary: 0 });
                     })
                         .finally(() => { page.close(); });
@@ -169,7 +144,7 @@ class Webshot extends CallableInstance {
             });
             return promise.then(data => {
                 if (data.boundary === null) {
-                    return this.renderWebshot(url, height + 3840, webshotDelay, ...morePostProcessings);
+                    return this.renderWebshot(url, height + 1920, webshotDelay, ...morePostProcessings);
                 }
                 else
                     return data.path;
@@ -235,7 +210,7 @@ class Webshot extends CallableInstance {
                 messageChain += (author + xmlEntities.decode(text));
             if (this.mode === 0) {
                 const url = (0, twitter_1.linkBuilder)({ postUrlSegment: item.code });
-                promise = promise.then(() => this.renderWebshot(url, 3840, webshotDelay, page => page.addStyleTag({ content: 'header>div>div+div{font-size:12px; line-height:15px; padding-top:0!important}' +
+                promise = promise.then(() => this.renderWebshot(url, 1920, webshotDelay, page => page.addStyleTag({ content: 'header>div>div+div{font-size:12px; line-height:15px; padding-top:0!important}' +
                         `header>div>div+div::before{content:"${item.user.full_name}"; color:#8e8e8e; font-weight:bold}`,
                 })))
                     .then(fileurl => {

src/webshot.ts

@@ -137,7 +137,7 @@ class Webshot extends CallableInstance<[LazyMediaItem[], (...args) => void, numb
             .then(() => page.addStyleTag({content:
               'nav,footer,main>*>*+*,header div>[class$=" "]>[class]+div,main button,canvas,main section,main section+div>ul>:not(div),' +
               'main section+div>ul>div [role="button"],section+div h2,article>*>:first-child+*>*>:first-child+*{display:none!important} ' +
-              'section+div{overflow:hidden} section+*>*{position:relative!important} article{border-bottom:1px solid!important} ' +
+              'section+div{overflow:hidden} section+*>*{position:relative!important} main>div{margin-bottom:0!important}' +
               'main section+div>ul{width:auto!important;padding:16px 0!important} main section+div>ul>div>li{padding:6px 2px 12px!important}',
             }))
             .then(() => page.addStyleTag({content:
@@ -159,47 +159,21 @@ class Webshot extends CallableInstance<[LazyMediaItem[], (...args) => void, numb
             }))
             .then(() => chainPromises(morePostProcessings.map(func => () => func(page))))
             .then(() => promisify(setTimeout)(getTimeout()))
-            .then(() => page.screenshot())
+            .then(() => page.$('article').then(article => article.screenshot()))
             .then(screenshot => {
               new PNG({
                 filterType: 4,
                 deflateLevel: 0,
               }).on('parsed', function () {
-                const idx = (x: number, y: number) => (this.width * y + x) << 2;
-                let boundary: number = null;
-                for (let y = this.height - 1; y > this.height - 3840; y -= zoomFactor) {
-                  if (
-                    this.data[idx(zoomFactor, y)] <= 38 &&
-                    this.data[idx(zoomFactor, y)] === this.data[idx(this.width - zoomFactor, y)] &&
-                    this.data[idx(zoomFactor, y + zoomFactor)] === this.data[idx(zoomFactor, y - 2 * zoomFactor)]
-                  ) {
-                    boundary = y - 1;
-                    break;
-                  }
-                }
-                if (boundary !== null) {
-                  logger.info(`found boundary at ${boundary}, cropping image`);
-                  this.data = this.data.slice(0, idx(this.width, boundary));
-                  this.height = boundary;
-
-                  sharpToFile(jpeg(this.pack())).then(path => {
-                    logger.info(`finished webshot for ${url}`);
-                    resolve({path, boundary});
-                  });
-                } else if (height >= 8 * 1920) {
-                  logger.warn('too large, consider as a bug, returning');
-                  sharpToFile(jpeg(this.pack())).then(path => {
-                    resolve({path, boundary: 0});
-                  });
-                } else {
-                  logger.info('unable to find boundary, try shooting a larger image');
-                  resolve({path: '', boundary});
-                }
+                sharpToFile(jpeg(this.pack())).then(path => {
+                  logger.info(`finished webshot for ${url}`);
+                  resolve({path, boundary: this.height});
+                });
               }).parse(screenshot);
             })
             .catch(err => {
               if (err instanceof Error && err.name !== 'TimeoutError') throw err;
-              logger.error(`error shooting webshot for ${url}, could not load web page of tweet`);
+              logger.error(`error shooting webshot for ${url}, could not load web page of post`);
               resolve({path: '', boundary: 0});
             })
             .finally(() => { page.close(); });
@@ -209,7 +183,7 @@ class Webshot extends CallableInstance<[LazyMediaItem[], (...args) => void, numb
     });
     return promise.then(data => {
       if (data.boundary === null) {
-        return this.renderWebshot(url, height + 3840, webshotDelay, ...morePostProcessings);
+        return this.renderWebshot(url, height + 1920, webshotDelay, ...morePostProcessings);
       } else return data.path;
     }).catch(error => this.reconnect(error)
       .then(() => this.renderWebshot(url, height, webshotDelay, ...morePostProcessings))
@@ -274,7 +248,7 @@ class Webshot extends CallableInstance<[LazyMediaItem[], (...args) => void, numb
       // invoke webshot
       if (this.mode === 0) {
         const url = linkBuilder({postUrlSegment: item.code});
-        promise = promise.then(() => this.renderWebshot(url, 3840, webshotDelay, page =>
+        promise = promise.then(() => this.renderWebshot(url, 1920, webshotDelay, page =>
           // display full name
           page.addStyleTag({content:
             'header>div>div+div{font-size:12px; line-height:15px; padding-top:0!important}' +