Resizer for readcomiconline.to

Make comic book pages fit on screen, because you're worth it.
当前为 2019-01-13 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Resizer for readcomiconline.to
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Make comic book pages fit on screen, because you're worth it.
// @author       itsnotlupus
// @match        https://readcomiconline.to/*
// @grant        GM_xmlhttpRequest
// @require      https://unpkg.com/[email protected]/dist/jquery.min.js
// ==/UserScript==

(function() {
  'use strict';
  
  const buttonholder = ".btnZoom-container";
  const images = "#divImage>p>img";

  const a = $("<a href=# class='btnZoom resize'>#</a>");
  $(buttonholder).append(a);
  a.click(e => {
    const pageWidth = document.body.clientWidth;
    $(images).each(async (i, elt) => {
      const { url, width, height } = await removeBanner(await blobify(elt.src));

      elt.src = url;
      
      // force cover to sit by itself.
      elt.style.maxWidth = "inherit";
      elt.style.maxHeight = "inherit";
      if (i===0) {
        // v1
        elt.style.display="block";
        elt.style.marginLeft = elt.style.marginRight = "auto";
      } else {
        // v2
        elt.parentElement.style.display="inline-block";
      }
      if (width>height) {
        // double pages. make it fit, even if you need to upscale.
        if (width/height > pageWidth/innerHeight) {
            elt.style.width = pageWidth+"px";
        } else {
            elt.style.height = innerHeight + "px";
        }
      } else {
        // single page. we don't upscale for now. maybe we should.
        elt.style.maxWidth = pageWidth/2+"px";
        elt.style.maxHeight = innerHeight + "px";
      }
    });
  });
  addEventListener('keydown', e => {
    let nextImage;
    switch (e.keyCode){
      case 39:
      case 40:
        nextImage = Array.from($(images)).find(img=>img.offsetTop>scrollY);
        break;
      case 37:
      case 38:
        nextImage = Array.from($(images)).reverse().find(img=>img.offsetTop<scrollY);
        break;
    }
    if (nextImage) {
      nextImage.scrollIntoView();
      e.preventDefault();
    }
  });
  
  const blobify = url => new Promise(resolve => {
    GM_xmlhttpRequest({
      method: 'GET',
      url,
      responseType: 'blob',
      onload: xhr => resolve(URL.createObjectURL(xhr.response))
    });
  });
  const removeBanner = (blobUrl) => new Promise(resolve => {
    const img = new Image;
    img.src = blobUrl;
    img.onload = e => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      // sad test for banner.
      const data = ctx.getImageData(0, img.height - 5, img.width, 4).data;
      let found = false;
      for (let i=0;i<data.length;i++) if (data[i] !== (i%4===3?255:0)) { found = true; break }
      if (!found) {
        canvas.height -= 80;
        ctx.drawImage(img, 0, 0);
        canvas.toBlob( blob => {
            resolve({
              url: URL.createObjectURL(blob),
              width: canvas.width,
              height: canvas.height
            })
        });
        console.log('removed banner from comic page.');
      } else {
        // no banner, do nothing.
        resolve({ url: blobUrl, width: img.width, height: img.height });
      }
    };
  });
})();