☰

Greasy Fork is available in English.

Resizer for readcomiconline.to

Make comic book pages fit on screen, because you're worth it.

2019-01-13 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

  1. // ==UserScript==
  2. // @name         Resizer for readcomiconline.to
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.4
  5. // @description  Make comic book pages fit on screen, because you're worth it.
  6. // @author       itsnotlupus
  7. // @match        https://readcomiconline.to/*
  8. // @grant        GM_xmlhttpRequest
  9. // @require      https://unpkg.com/jquery@3.3.1/dist/jquery.min.js
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.   'use strict';
  14.   
  15.   const buttonholder = ".btnZoom-container";
  16.   const images = "#divImage>p>img";
  17.  
  18.   const a = $("<a href=# class='btnZoom resize'>#</a>");
  19.   $(buttonholder).append(a);
  20.   a.click(e => {
  21.     const pageWidth = document.body.clientWidth;
  22.     $(images).each(async (i, elt) => {
  23.       const { url, width, height } = await removeBanner(await blobify(elt.src));
  24.  
  25.       elt.src = url;
  26.       
  27.       // force cover to sit by itself.
  28.       elt.style.maxWidth = "inherit";
  29.       elt.style.maxHeight = "inherit";
  30.       if (i===0) {
  31.         // v1
  32.         elt.style.display="block";
  33.         elt.style.marginLeft = elt.style.marginRight = "auto";
  34.       } else {
  35.         // v2
  36.         elt.parentElement.style.display="inline-block";
  37.       }
  38.       if (width>height) {
  39.         // double pages. make it fit, even if you need to upscale.
  40.         if (width/height > pageWidth/innerHeight) {
  41.             elt.style.width = pageWidth+"px";
  42.         } else {
  43.             elt.style.height = innerHeight + "px";
  44.         }
  45.       } else {
  46.         // single page. we don't upscale for now. maybe we should.
  47.         elt.style.maxWidth = pageWidth/2+"px";
  48.         elt.style.maxHeight = innerHeight + "px";
  49.       }
  50.     });
  51.   });
  52.   addEventListener('keydown', e => {
  53.     let nextImage;
  54.     switch (e.keyCode){
  55.       case 39:
  56.       case 40:
  57.         nextImage = Array.from($(images)).find(img=>img.offsetTop>scrollY);
  58.         break;
  59.       case 37:
  60.       case 38:
  61.         nextImage = Array.from($(images)).reverse().find(img=>img.offsetTop<scrollY);
  62.         break;
  63.     }
  64.     if (nextImage) {
  65.       nextImage.scrollIntoView();
  66.       e.preventDefault();
  67.     }
  68.   });
  69.   
  70.   const blobify = url => new Promise(resolve => {
  71.     GM_xmlhttpRequest({
  72.       method: 'GET',
  73.       url,
  74.       responseType: 'blob',
  75.       onload: xhr => resolve(URL.createObjectURL(xhr.response))
  76.     });
  77.   });
  78.   const removeBanner = (blobUrl) => new Promise(resolve => {
  79.     const img = new Image;
  80.     img.src = blobUrl;
  81.     img.onload = e => {
  82.       const canvas = document.createElement('canvas');
  83.       const ctx = canvas.getContext('2d');
  84.       canvas.width = img.width;
  85.       canvas.height = img.height;
  86.       ctx.drawImage(img, 0, 0);
  87.       // sad test for banner.
  88.       const data = ctx.getImageData(0, img.height - 5, img.width, 4).data;
  89.       let found = false;
  90.       for (let i=0;i<data.length;i++) if (data[i] !== (i%4===3?255:0)) { found = true; break }
  91.       if (!found) {
  92.         canvas.height -= 80;
  93.         ctx.drawImage(img, 0, 0);
  94.         canvas.toBlob( blob => {
  95.             resolve({
  96.               url: URL.createObjectURL(blob),
  97.               width: canvas.width,
  98.               height: canvas.height
  99.             })
  100.         });
  101.         console.log('removed banner from comic page.');
  102.       } else {
  103.         // no banner, do nothing.
  104.         resolve({ url: blobUrl, width: img.width, height: img.height });
  105.       }
  106.     };
  107.   });
  108. })();