☰

yoedge-horizontal-screen

实现灰机汉化组漫画网站（yoedge.com）的横屏阅读模式

目前為 2017-09-17 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name        yoedge-horizontal-screen
  3. // @namespace   https://github.com/Lockvictor
  4. // @author      Lockvictor
  5. // @description 实现灰机汉化组漫画网站（yoedge.com）的横屏阅读模式
  6. // @homepage    https://github.com/Lockvictor/yoedge-horizontal-screen
  7. // @match       http://*.yoedge.com/smp-app/*
  8. // @version     2.1.0
  9. // @grant       none
  10. // ==/UserScript==
  11.  
  12. //漫画宽高比
  13. const MANGA_ASPECT_RATIO = 1.5;
  14.  
  15. //默认屏幕占比
  16. const DEFAULT_SCALE_RATIO = 0.6;
  17. //最大占比，漫画与屏幕等宽
  18. const MAX_SCALE_RATIO = 1;
  19. //最小占比，漫画与屏幕等高，即原来的竖屏模式
  20. const MIN_SCALE_RATIO = window.screen.height / MANGA_ASPECT_RATIO / window.screen.width;
  21. //屏幕占比缩放步长
  22. const SCALE_STEP = 0.05;
  23.  
  24. //j和k快捷键滚动屏幕的比例
  25. const SCROLLBY_RATIO = 0.2;
  26.  
  27. //漫画当前屏幕占比
  28. let gMangaAreaRatio = DEFAULT_SCALE_RATIO;
  29.  
  30. (function () {
  31.     'use strict';
  32.  
  33.     document.body.innerHTML = '';
  34.     document.addEventListener('contextmenu', event => event.preventDefault());
  35.  
  36.     //获取本话的配置信息，主要包括页数和图片的url
  37.     let configUrl = window.location.href.replace('index.html', 'smp_cfg.json');
  38.     fetch(configUrl).then(response => response.json())
  39.         .then(config => loadAllPage(config))
  40.         .catch(e => alert(e));
  41. })();
  42.  
  43. function loadAllPage(config) {
  44.     //获取图片url和序号
  45.     let orderList = config.pages.order;
  46.     let imageUrlList = config.pages.page;
  47.  
  48.     //创建漫画原图的img元素
  49.     for (let i = 0; i < orderList.length; i++) {
  50.         let order = orderList[i];
  51.         let img = document.createElement('img');
  52.         img.id = 'img' + order;
  53.         img.style.display = 'none';
  54.         img.src = imageUrlList[order];
  55.         document.body.appendChild(img);
  56.     }
  57.  
  58.     let imgElementList = document.getElementsByTagName('img');
  59.  
  60.     //图片传输需要时间，直接获取会出错，采用分次加载，每次加载5张图
  61.     let loadStartIndex = 0;
  62.     const LOAD_STEP = 5;
  63.     const INDEX_LIMIT = imgElementList.length;
  64.     // console.log(`INDEX_LIMIT: ${INDEX_LIMIT}`);
  65.     let imgSizeCheckFlag = setInterval(function () {
  66.         let expectEndIndex = loadStartIndex + LOAD_STEP;
  67.         let loadEndIndex = (expectEndIndex > INDEX_LIMIT)? INDEX_LIMIT : expectEndIndex;
  68.  
  69.         if (isImageOk(imgElementList, loadStartIndex, loadEndIndex)) {
  70.             //用canvas绘制原图，实现反色块的处理
  71.             drawImageByCanvas(orderList, imageUrlList, loadStartIndex, loadEndIndex);
  72.             loadStartIndex = loadEndIndex;
  73.         }
  74.         
  75.         if (loadStartIndex === INDEX_LIMIT) {
  76.             clearInterval(imgSizeCheckFlag);
  77.         }
  78.         // console.log('loadStartIndex: ' + loadStartIndex);
  79.     }, 1000);
  80.  
  81.     // 自定义缩放、滚动等快捷键
  82.     customizeShortcut();
  83. }
  84.  
  85. function isImageOk(imgElementList, startIndex, endIndex) {
  86.     let isLoaded = true;
  87.     for (let i = startIndex; i < endIndex; i++) {
  88.         let img = imgElementList[i];
  89.         if (!img.complete || img.naturalWidth === 0) {
  90.             isLoaded = false;
  91.             break;
  92.         }
  93.     }
  94.     return isLoaded;
  95. }
  96.  
  97. function drawImageByCanvas(orderList, imageUrlList, startIndex, endIndex) {
  98.     for (let i = startIndex; i < endIndex; i++) {
  99.         let order = orderList[i];
  100.  
  101.         let img = document.getElementById('img' + order);
  102.         let width = img.naturalWidth;
  103.         let height = img.naturalHeight;
  104.         // console.log(img);
  105.         // console.log(`order: ${order}, width: ${width}, height: ${height}`);
  106.  
  107.         let mgcanv = document.createElement('canvas');
  108.         mgcanv.id = 'canvas' + order;
  109.         mgcanv.width = width;
  110.         mgcanv.height = height;
  111.         mgcanv.style.display = 'block';
  112.         mgcanv.style.margin = '0 auto';
  113.         mgcanv.style.width = numberToPercentage(gMangaAreaRatio);
  114.         // console.log(mgcanv);
  115.  
  116.         let context = mgcanv.getContext('2d');
  117.         context.drawImage(img, 0, 0);
  118.         //前5张图没有反色块
  119.         if (i > 4) {
  120.             cleanClutter(imageUrlList[order], context, width, height);
  121.         }
  122.         document.body.appendChild(mgcanv);
  123.     }
  124. }
  125.  
  126. function cleanClutter(imageUrl, context, width, height) {
  127.     var imageData = context.getImageData(0, 0, width, height);
  128.     var data = imageData.data;
  129.  
  130.     var j1 = 0, j2 = 0;
  131.     var r = width * 4, r1 = r * 110, r2 = r;
  132.     var y1 = Math.floor(height >> 1) & 0xFFFFFFE;
  133.     if (window.clutter == '2' && imageUrl.indexOf('.png') !== -1) {
  134.         y1 = 100;
  135.     }
  136.     var x1 = Math.floor(width / 3);
  137.     var x2 = x1 << 1;
  138.     var y2 = y1 + 20;
  139.     if (height > 550) {
  140.         y2 = y1 + 60;
  141.     }
  142.  
  143.     if (window.clutter == '2') {
  144.         var lastOf = imageUrl.lastIndexOf('/');
  145.         var fileName = decodeURI(imageUrl.substring(lastOf));
  146.         if (fileName.indexOf("3") != -1) {
  147.             y1 -= 8;
  148.             y2 -= 11;
  149.         } else if (fileName.indexOf("4") != -1) {
  150.             y1 -= 6;
  151.             y2 -= 13;
  152.         } else if (fileName.indexOf("5") != -1) {
  153.             y2 -= 14;
  154.         } else if (fileName.indexOf("7") != -1) {
  155.             y1 -= 2;
  156.             y2 -= 3;
  157.         } else if (fileName.indexOf("9") != -1) {
  158.             y2 -= 13;
  159.         } else if (fileName.indexOf("01") != -1) {
  160.             y2 -= 11;
  161.         } else if (fileName.indexOf("02") != -1) {
  162.             y1 -= 12;
  163.             y2 -= 17;
  164.         }
  165.         if (fileName.indexOf("4") != -1) {
  166.             x1 -= 7;
  167.             x2 -= 19;
  168.         } else if (fileName.indexOf("5") != -1) {
  169.             x1 -= 15;
  170.             x2 -= 13;
  171.         } else if (fileName.indexOf("6") != -1) {
  172.             x1 -= 31;
  173.             x2 = x1 + 76;
  174.         } else if (fileName.indexOf("7") != -1) {
  175.             x1 += 21;
  176.         } else if (fileName.indexOf("8") != -1) {
  177.             x2 -= 13;
  178.         } else if (fileName.indexOf("01") != -1) {
  179.             x2 = x1 + 99;
  180.         } else if (fileName.indexOf("02") != -1) {
  181.             x1 -= 13;
  182.             x2 = x1 + 97;
  183.         } else if (fileName.indexOf("03") != -1) {
  184.             x2 = x1 + 91;
  185.         }
  186.     }
  187.     var is = y1 * r + x1 * 4, i = 0;
  188.  
  189.     if (window.clutter == '2') {
  190.         for (j1 = y1; j1 < y2; j1 += 1) {
  191.             i = is;
  192.             for (j2 = x1; j2 < x2; j2++) {
  193.                 data[i + 2] = data[i + 2] ^ 0xFF;
  194.                 data[i + 1] = data[i + 1] ^ 0xFF;
  195.                 data[i] = data[i] ^ 0xFF;
  196.                 i += 4;
  197.             }
  198.             x2--;
  199.             is += r2;
  200.         }
  201.     } else {
  202.         for (j1 = y1; j1 < y2; j1 += 1) {
  203.             i = is;
  204.             for (j2 = x1; j2 < x2; j2++) {
  205.                 if (data[i + 3 - r1] !== 0) {
  206.                     data[i + 2] = data[i + 2] ^ data[i + 2 - r1];
  207.                     data[i + 1] = data[i + 1] ^ data[i + 1 - r1];
  208.                     data[i] = data[i] ^ data[i - r1];
  209.                 }
  210.                 i += 4;
  211.             }
  212.             is += r2;
  213.         }
  214.     }
  215.  
  216.     context.putImageData(imageData, 0, 0);
  217. }
  218.  
  219. function scale(increment) {
  220.     var expectedScaleRatio = gMangaAreaRatio + increment;
  221.     if (increment > 0) {
  222.         gMangaAreaRatio = (expectedScaleRatio >= MAX_SCALE_RATIO) ? MAX_SCALE_RATIO : expectedScaleRatio;
  223.     } else if (increment < 0) {
  224.         gMangaAreaRatio = (expectedScaleRatio <= MIN_SCALE_RATIO) ? MIN_SCALE_RATIO : expectedScaleRatio;
  225.     }
  226.  
  227.     var newWidth = numberToPercentage(gMangaAreaRatio);
  228.     canvasList = document.getElementsByTagName('canvas');
  229.     for (var i = 0; i < canvasList.length; i++) {
  230.         canvasList[i].style.width = newWidth;
  231.     }
  232. }
  233.  
  234. function customizeShortcut() {
  235.     // 漫画缩放、滚动、翻页
  236.     // 缩放和滚动都可以持续响应，注册到keydown
  237.     document.addEventListener('keydown', function (event) {
  238.         switch (event.key) {
  239.             case '=':
  240.                 scale(SCALE_STEP);
  241.                 break;
  242.             case '-':
  243.                 scale(-SCALE_STEP);
  244.                 break;
  245.             case '0':
  246.                 gMangaAreaRatio = DEFAULT_SCALE_RATIO;
  247.                 scale(0);
  248.                 break;
  249.             case 'j':
  250.                 smoothyScrollBy(0, screen.width * gMangaAreaRatio * MANGA_ASPECT_RATIO * SCROLLBY_RATIO);
  251.                 break;
  252.             case 'k':
  253.                 smoothyScrollBy(0, -screen.width * gMangaAreaRatio * MANGA_ASPECT_RATIO * SCROLLBY_RATIO);
  254.                 break;
  255.             case 'h':
  256.                 smoothyScrollTo(0, 0);
  257.                 break;
  258.             case 'l':
  259.                 smoothyScrollTo(0, document.body.scrollHeight);
  260.                 break;
  261.             default:
  262.                 break;
  263.         }
  264.     });
  265.  
  266.     // 跳转下一话是单次响应，注册到keyup
  267.     document.addEventListener('keyup', function (event) {
  268.         switch (event.key) {
  269.             case 'n':
  270.                 smp.toolbar.nextApp();
  271.                 break;
  272.             default:
  273.                 break;
  274.         }
  275.     });
  276. }
  277.  
  278.  
  279. //=====================基础功能相关函数=====================
  280. function smoothyScrollBy(offsetX, offsetY) {
  281.     try {
  282.         window.scrollBy({ top: offsetY, left: offsetX, behavior: 'smooth' });
  283.     } catch (error) {
  284.         window.scrollBy(offsetX, offsetY);
  285.     }
  286. }
  287.  
  288. function smoothyScrollTo(x, y) {
  289.     try {
  290.         window.scrollTo({ top: y, left: x, behavior: 'smooth' });
  291.     } catch (error) {
  292.         window.scrollTo(x, y);
  293.     }
  294. }
  295.  
  296. function numberToPercentage(value) {
  297.     return Math.floor(100 * value) + '%';
  298. }