2021-08-30更新：
感谢评论区的HuHu菊苣指点，已经更新（见文末的 gist.github.com）了另外一个仅hook渲染函数而非drawImage()的userscript。虽然使用上体验应该没有区别。bw.py也更新，同时兼容新旧两种方式。
之前已经大致讲过如何通过canvas来提取BW的图片。
之前脚本的问题
脚本的原理很简单，就是覆盖BW的viewer JS的某个渲染函数来让其把图片解码绘制到我们提供的一个canvas中，然后dump那个canvas的内容。
这个方法一切都好，但是有个小毛病：就是图像最下面会有2px的白边。
注意，这里的白边指的不是dummy width/height：BW的资源文件（JPEG）有时候会有一定程度的无效内容”出血“，但是在元数据里已经标记出来，在浏览器显示的时候，自动就把这部分切掉了。我之前的脚本也会正常将这个部分切掉。
这里说的白边的毛病是，即使对于完全没有dummy height/width的图，渲染/解码到尺寸和图片完全一致的canvas里，也会在下方出现2px的白边。如果只是单纯添加白边就罢了，他还导致所有上面的内容resize一次（例如1448×2048->1448×2046），整个图片变糊，在文字部分尤其明显：
能否通过给canvas多加2px高度来解决呢？答案是否定的，只会变成这样（笑）：
其实你在浏览器里浏览的时候，就会发现这个白边（严格来讲是杂色边）本身就存在的（下图）。所以不是我们的破解搞出的问题。
理论上来讲，如果我们hack更底层一些，应该是可以在浏览器端解决这个问题的，但是我实在是懒得搞了，就这么一直忍了下来。
2021-08-30更新：根据评论区HuHu的信息，这个2px高的杂色条其实是用来track用户账号的条码！那就更应该一定要把它去掉了。
更好的dump方式
直到今天有网友推荐了这篇aloxaf的文章，开启了新的大门。
此文中，作者通过另外一种方法：直接hook了drawImage()，然后记录下来所有的swap块的操作dump下来，这样本地就可以还原了。
（顺便一提，作者提到了在Firefox里直接dump canvas会提示“The operation is insecure”的问题——也就是上文里提到的Chrome里的tainted canvas的问题。但是很吊诡的是，在成文之后更新了数个Chrome版本之后可以完全直接dump不用加--disable-web-security了，但是试了下Firefox还是不行。）
这个方法有2个优点：1是完全规避了上面提到的BW本身viewer的2px白边劣化；2是dump下来的原始JPEG文件没有经过2次保存，存档节省空间。观看的时候动态重新解码即可。
不过也有2个问题。
首先，这个脚本不支持Chrome。至于为什么不支持，是因为在drawImage()操作时，Firefox里收到的第一个参数是Image，但是在Chrome里却是ImageBitmap。浏览器本身的原版函数这两种对象都是支持的，暂不清楚为什么会有区别，可能是BW的JS对不同浏览器进行了（没有意义的）适配（根据这篇文章，如果输入ImageBitmap，性能要好一些，但是似乎没有考虑到转换Image到ImageBitmap消耗的时间？）。Image对象转换成ImageBitmap就丢失了src，所以导致匹配页码什么的变得很麻烦。虽然应该改改也很容易，但是因为hook这种底层函数老导致浏览器卡死，也没什么心情继续折腾了，就用Firefox呗。
另外一个问题则比较关键，就是上面提到的dummyHeight、dummyWidth的问题。如果丢失这两个参数，会导致下载下来的图片解码后，无法得知应该切掉多少无效内容。而且，每页的出血也不一定是一致的，所以也不能无脑裁剪。
还好，稍微研究了下全局对象，把元数据的部分下载的时候直接一并dump下来，再在本地处理即可。
这里多说几句，根据我的观察，一般而言BW的书大概都是这么个结构：
第一页一般是无混淆、无出血的。估计是因为封面图会在别的地方，比如目录，展示用。这有个副作用会导致我们记录 drawImage()记录出一些无效的信息，暂时直接在Python那边忽略了。
第二页起有混淆和一致的出血。出血都是在右边、下边（我有确认过是真·无效内容，基本都是乱色）。目前见过：
- 无出血 (VOICE BRODY)
- 5, 5 （宽，高，下同） 出血 (声A）
- 6, 0 出血 (My Girl)
我的修改版本
我的修改版本文章最下方，主要改动如下。
JS部分改动
原始脚本里，有个比较原始的自动翻页的功能，是调用了viewer本身的function（具体字段名称升级经常变动。我这里修改成了最新版本）。不过，并不太好用——偶尔会漏页，而且翻太快会出现403之类的。
我改写了个更robust的。虽然非常啰嗦，但是一时想不出更好的写法，就这样吧。
我之前的脚本是直接复制到控制台运行（或者做成bookmarklet）的，这个脚本作者写成了userscript的形式。这点是很必需的：如果在页面渲染完才输入，肯定会有很多次drawImage()事件就错过了。
不过用userscript会无法访问BW viewer生成的那一堆全局对象（因为注入时还没生成），在添加一些功能时有一定局限性（比如作者最开始的设计要手动在命令行输入SaveToZip()）。我懒得折腾MutationObserver之类的，简单粗暴加了个延时改写一下。
2021-08-30更新：更了V2版，直接调用他原本的函数取得交换参数。V1版保留（毕竟那个应该更耐艹）。
Python部分改动
py合成的部分基本重写了，加上了切出血的步骤。另外额外增加了自动切声A和Animedia的功能（这个社的杂志源文件就自带白边）。使用方法就是bw.py {zip文件名或者解压后的目录名}
| from pathlib import Path | |
| import zipfile | |
| import sys | |
| import json | |
| from shutil import copy2 | |
| from PIL import Image | |
| # pip install Pillow -U | |
| SETTING_SAVE_FORMAT = '.bmp' | |
| SETTING_AUTO_CROP_ANIMEDIA = True | |
| def load_json(filename): | |
| filename = Path(filename) | |
| with filename.open('r', encoding='utf-8') as f: | |
| data = json.load(f) | |
| return data | |
| def main(input_file): | |
| input_file = Path(input_file) | |
| if input_file.is_file() and input_file.suffix == '.zip': | |
| p = input_file.with_suffix('') | |
| with zipfile.ZipFile(input_file, 'r') as zf: | |
| zf.extractall(p) | |
| elif input_file.is_dir(): | |
| p = input_file | |
| else: | |
| print(f'[E] Invalid input {input_file}.') | |
| sys.exit(1) | |
| coords = load_json(p / 'coords.json') | |
| metadata = load_json(p / 'metadata.json') | |
| def get_dummy(identifier): | |
| dummy_width = 0 | |
| dummy_height = 0 | |
| keyword = f'/{identifier}.xhtml' | |
| idx = None | |
| for key, value in metadata['normal_default']['t1b'].items(): | |
| if keyword in key: | |
| idx = value | |
| break | |
| assert idx is not None | |
| info = metadata['normal_default']['files'][idx]['FileLinkInfo']['PageLinkInfoList'][0]['Page'] | |
| if 'DummyWidth' in info: | |
| dummy_width = info['DummyWidth'] | |
| if 'DummyHeight' in info: | |
| dummy_height = info['DummyHeight'] | |
| return dummy_width, dummy_height | |
| raw = p / 'raw' | |
| raw.mkdir(exist_ok=True) | |
| for f in [f for f in p.iterdir() if f.suffix == '.jpeg']: | |
| processed = False | |
| print(f'[I] Processing {f.name}…') | |
| img = Image.open(f) | |
| new = Image.new("RGB", img.size) | |
| try: | |
| coord = coords[f.name] | |
| if coord: # images that are NOT encoded have [] as coord | |
| for pos in coord: | |
| if isinstance(pos, dict) and 'srcX' in pos: | |
| part = img.crop((pos['destX'], pos['destY'], pos['destX'] + pos['width'], pos['destY'] + pos['height'])) | |
| new.paste(part, (pos['srcX'], pos['srcY'], pos['srcX'] + pos['width'], pos['srcY'] + pos['height'])) | |
| else: | |
| part = img.crop((pos[0], pos[1], pos[0] + pos[2], pos[1] + pos[3])) | |
| new.paste(part, (pos[4], pos[5], pos[4] + pos[6], pos[5] + pos[7])) | |
| processed = True | |
| except Exception as e: | |
| print(f.name, e) | |
| dummy_width, dummy_height = get_dummy(f.stem) | |
| if dummy_width > 0 or dummy_height > 0: | |
| processed = True | |
| print(f'[I] {f.name} has bleeding of ({dummy_width}, {dummy_height}). Cropping…') | |
| new = new.crop( | |
| (0, 0, new.size[0] – dummy_width, new.size[1] – dummy_height)) | |
| # Only re-save if the image was actually processed (cropped, re-arranged, etc.) | |
| if processed: | |
| f.rename(raw / f.name) | |
| new.save(f.with_suffix(SETTING_SAVE_FORMAT)) | |
| else: | |
| print(f'[W] {f.name} is not actually processed. Keep the original JPEG file.') | |
| copy2(f, raw / f.name) | |
| # automatically crop images from Seiyuu Animedia, Animedia and Megami (all from the publisher Gakken Plus) | |
| if SETTING_AUTO_CROP_ANIMEDIA and any(mag in p.name for mag in ['アニメディア', 'メガミマガジン']): | |
| backup = p / 'rearrange_only' | |
| backup.mkdir(exist_ok=True) | |
| print(f'[I] This book ({p.name}) is SeiA or Animedia. Cropping…') | |
| for f in p.iterdir(): | |
| if f.suffix in ['.jpeg', SETTING_SAVE_FORMAT]: | |
| print(f'Processing {f.name}…') | |
| im = Image.open(f) | |
| w, h = im.size | |
| if w == 1851 and h == 2339: | |
| im_cropped = im.crop((8, 18, w – 8, h – 2)) | |
| else: | |
| print(f'[E] {f.name} has wrong dimension!') | |
| continue | |
| f.rename(backup / f.name) | |
| im_cropped.save(f.with_suffix(SETTING_SAVE_FORMAT)) | |
| print('[I] Done!') | |
| if __name__ == '__main__': | |
| if len(sys.argv) == 2: | |
| input_file = sys.argv[1] | |
| main(input_file) | |
| else: | |
| print('Usage: bw.py <input zip file or folder>') |
| // ==UserScript== | |
| // @name bookwalker 图片提取 | |
| // @namespace Aloaxf | |
| // @version 2.1 | |
| // @description 提取 bookwaler 中的图片 | |
| // @author Aloxaf, fireattack | |
| // @updateURL https://gist.github.com/fireattack/384f01e76c3e42f6e24d97e8b56a6387/raw/d676569681ee71b45cf3a724499cd3c702d527fa/userscript.user.js | |
| // @match https://pcreader.bookwalker.com.tw/* | |
| // @match https://viewer.bookwalker.jp/* | |
| // @match https://viewer-subscription.bookwalker.jp/* | |
| // @icon https://www.google.com/s2/favicons?domain=bookwalker.com.tw | |
| // @require https://cdn.jsdelivr.net/gh/eligrey/FileSaver.js@2.0.4/dist/FileSaver.min.js | |
| // @require https://cdn.jsdelivr.net/gh/Stuk/jszip@3.5.0/dist/jszip.min.js | |
| // @require https://cdn.jsdelivr.net/gh/stuk/jszip-utils@0.1.0/dist/jszip-utils.min.js | |
| // @grant unsafeWindow | |
| // ==/UserScript== | |
| function addToZip(name, url) { | |
| let content = new Promise((resolve, reject) => { | |
| JSZipUtils.getBinaryContent(url, (err, data) => { | |
| if (err) { | |
| reject(err); | |
| } else { | |
| resolve(data); | |
| } | |
| }); | |
| }); | |
| imagepack.file(name, content, { binary: true }); | |
| } | |
| function drawImageHook(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) { | |
| if (image.src && image.src.indexOf('.jpeg') != –1) { | |
| let name = image.src.match(/(?<=\/)[^/]+(?=\.xhtml)/)[0] + ".jpeg"; | |
| let count = Object.keys(coords).length + 1; | |
| if (!coords[name]) { | |
| console.log(`[${count}] downloading ${name}`); | |
| addToZip(name, image.src); | |
| coords[name] = new Set(); | |
| } | |
| coords[name].add([sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight]); | |
| } | |
| return CanvasRenderingContext2D.prototype._drawImage.apply(this, arguments); | |
| } | |
| function setToJson(key, value) { | |
| if (typeof value === 'object' && value instanceof Set) { | |
| // remove duplicates | |
| let arr = []; | |
| let arr_str = []; | |
| for (let item of value) { | |
| if (!arr_str.includes(item.join(','))) { | |
| arr.push(item); | |
| arr_str.push(item.join(',')); | |
| } | |
| } | |
| return arr; | |
| } | |
| return value; | |
| } | |
| let imagepack = new JSZip(); | |
| let coords = {}; | |
| let autoscroll = false; | |
| CanvasRenderingContext2D.prototype._drawImage = CanvasRenderingContext2D.prototype.drawImage; | |
| CanvasRenderingContext2D.prototype.drawImage = drawImageHook; | |
| unsafeWindow.saveAs = saveAs; | |
| unsafeWindow.saveAsZip = () => { | |
| console.log('Start saving zip file, it may take awhile…') | |
| imagepack.file('metadata.json', JSON.stringify(NFBR.a6G.Initializer.F5W.menu.model.get('o3r')['content'])); | |
| imagepack.file('coords.json', JSON.stringify(coords, setToJson)); | |
| imagepack | |
| .generateAsync({ type: "blob" }) | |
| .then(blob => { | |
| saveAs(blob, NFBR.a6G.Initializer.F5W.menu.model.get('contentTitle') + " [BW].zip"); | |
| console.log('Done.'); | |
| }); | |
| }; | |
| setTimeout(function () { | |
| if (confirm('Start auto-scroll?')) { | |
| var totalPageCount = NFBR.a6G.Initializer.F5W.menu.model.get('F8O'); | |
| var index = {}; | |
| var o = NFBR.a6G.Initializer.F5W.menu.model.get('o3r').content.normal_default.t1b; | |
| for (const property in o) { | |
| index[o[property]] = property.match(/(?<=\/)[^/]+(?=\.xhtml)/)[0] + ".jpeg"; | |
| } | |
| NFBR.a6G.Initializer.F5W.menu.a6l.moveToFirst(); | |
| setTimeout(function () { | |
| var timer = setInterval(function () { | |
| var currentPage = NFBR.a6G.Initializer.F5W.menu.model.get('viewerPage'); | |
| var nextPage = –1; | |
| for (const i in index) { | |
| if (!Object.keys(coords).includes(index[i])) { | |
| nextPage = Number(i); | |
| break; | |
| } | |
| } | |
| if (nextPage > currentPage + 2) { //在首页只会自动load 0、1、2这三页，所以最多+2 否则会卡住 | |
| console.log('Changing page to ' + nextPage); | |
| NFBR.a6G.Initializer.F5W.menu.a6l.moveToPage(Number(nextPage)); | |
| } | |
| if (Object.keys(coords).length == totalPageCount) { | |
| console.log('Downloaded all the pages!'); | |
| if (confirm('Parsing finished. Save zip?')) unsafeWindow.saveAsZip(); | |
| clearInterval(timer); | |
| } | |
| }, 200); | |
| }, 1000); //+1s | |
| } | |
| }, 6000); //6秒后开始自动载入 |
| // ==UserScript== | |
| // @name bookwalker 图片提取 V2 | |
| // @namespace Aloaxf | |
| // @version 3.1 | |
| // @description 提取 bookwaler 中的图片 | |
| // @author Aloxaf, fireattack | |
| // @updateURL https://gist.github.com/fireattack/384f01e76c3e42f6e24d97e8b56a6387 | |
| // @match https://pcreader.bookwalker.com.tw/* | |
| // @match https://viewer.bookwalker.jp/* | |
| // @match https://viewer-subscription.bookwalker.jp/* | |
| // @icon https://www.google.com/s2/favicons?domain=bookwalker.com.tw | |
| // @require https://cdn.jsdelivr.net/gh/eligrey/FileSaver.js@2.0.4/dist/FileSaver.min.js | |
| // @require https://cdn.jsdelivr.net/gh/Stuk/jszip@3.5.0/dist/jszip.min.js | |
| // @require https://cdn.jsdelivr.net/gh/stuk/jszip-utils@0.1.0/dist/jszip-utils.min.js | |
| // @grant unsafeWindow | |
| // ==/UserScript== | |
| function addToZip(name, url) { | |
| let content = new Promise((resolve, reject) => { | |
| JSZipUtils.getBinaryContent(url, (err, data) => { | |
| if (err) { | |
| reject(err); | |
| } else { | |
| resolve(data); | |
| } | |
| }); | |
| }); | |
| imagepack.file(name, content, { binary: true }); | |
| } | |
| let imagepack = new JSZip(); | |
| let coords = {}; | |
| let downloaded = new Set(); | |
| unsafeWindow.saveAs = saveAs; | |
| unsafeWindow.saveAsZip = () => { | |
| console.log('Start saving zip file, it may take awhile…') | |
| imagepack.file('metadata.json', JSON.stringify(NFBR.a6G.Initializer.F5W.menu.model.get('o3r')['content'])); | |
| imagepack.file('coords.json', JSON.stringify(coords)); | |
| imagepack | |
| .generateAsync({ type: "blob" }) | |
| .then(blob => { | |
| saveAs(blob, NFBR.a6G.Initializer.F5W.menu.model.get('contentTitle') + " [BW].zip"); | |
| console.log('Done.'); | |
| }); | |
| }; | |
| function hook() { | |
| const backup = NFBR.a6G.a5x.prototype['U8j']; | |
| NFBR.a6G.a5x.prototype['U8j'] = function () { | |
| const [targetCanvas, page, image, drawRect, flag] = arguments; | |
| if (image && image.src && image.src.indexOf('.jpeg') != –1) { | |
| let name = image.src.match(/(?<=\/)[^/]+(?=\.xhtml)/)[0] + ".jpeg"; | |
| let count = Object.keys(coords).length + 1; | |
| if (!coords[name]) { | |
| console.log(`[${count}] downloading ${name}`); | |
| addToZip(name, image.src); | |
| if (page.u5T === undefined) coords[name] = []; | |
| else coords[name] = NFBR.a6G.Initializer.F5W.renderer['n0v'](page, image.width, image.height); | |
| downloaded.add(page.index); | |
| } | |
| } | |
| return backup.apply(this, arguments); | |
| }; | |
| console.log('Hook successful!') | |
| } | |
| setTimeout(function () { | |
| hook(); | |
| if (confirm('Start auto-scroll?')) { | |
| var totalPageCount = NFBR.a6G.Initializer.F5W.menu.model.get('F8O'); | |
| NFBR.a6G.Initializer.F5W.menu.a6l.moveToFirst(); | |
| setTimeout(function () { | |
| var timer = setInterval(function () { | |
| let nextPage = Math.max(…downloaded) + 1; | |
| let currentPage = NFBR.a6G.Initializer.F5W.menu.model.get('viewerPage'); | |
| if (nextPage > currentPage + 2) { //在首页只会自动load 0、1、2这三页，所以最多+2 否则会卡住 | |
| console.log('Changing page to ' + nextPage); | |
| NFBR.a6G.Initializer.F5W.menu.a6l.moveToPage(nextPage); | |
| } | |
| if (downloaded.length == totalPageCount) { | |
| console.log('Downloaded all the pages!'); | |
| if (confirm('Parsing finished. Save zip?')) unsafeWindow.saveAsZip(); | |
| clearInterval(timer); | |
| } | |
| }, 200); | |
| }, 1000); //+1s | |
| } | |
| }, 6000); //6秒后开始自动载入 |
