20161116_【教程】全索引 精确定位 图片版 词典的制作
本帖最后由 chigre3 于 2016-12-1 20:17 编辑20161201：
【2016.12.01更新】【实例】图片词典 词条切图版 制作
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=19228&fromuid=174481
(出处: 掌上百科)
-----------------------------------------------------------------------------------------------------
重要说明：以下内容只是简单的整理说明，个中许多操作并未进行面面俱到的解释，请读者自行参透或者留言讨论。
双栏图片版词典，所需要的数据就是：词条索引及其位置, 清晰图片
下面用现成的工具软件，更加有效率地制作词典！
https://www.pdawiki.com/forum/data/attachment/forum/201609/03/080712dk6kiuqx20mo6mu0.png
（2栏图片版词典的层与CSS设计）
-----------------------------------------------------------------------------------------------------
1. 高分辨率清晰规整图片：
(1) PDG转PIC：使用“老马”的"pdg2pic"（http://yun.baidu.com/s/1qXFS9dy）
↘使用“ComicEnhancerPro”对高分辨率图片进行批量处理为黑白双色
--> 使用“Abbyy FineReader”对图片仅进行校直
--> 另存为：PNG（灰度，方便下面拉到Photoshop里可以自由拖移到模板里）
(2) 使用Photoshop，建立固定大小的模板，拉若干条参考线（中线、文本顶端线/下划线、左右边界线）
--> 一次性打开５０张图片，再一张张拖入到上面的模板中，全选所有图层，居中，再一张张慢慢移位
--> 最终：【脚本】->【把图层导出到文件】-->【文件类型：TIFF, 图像压缩：LZW】（这样速度快！）
--> 还可以继续使用“老马”的 "ComicEnhancerPro" 将图片缩小化，转换格式为png
【屏幕录像观看“PS移位和导出.gif”：https://yadi.sk/d/Y5_nQu_txW5X4】
https://www.pdawiki.com/forum/data/attachment/forum/201609/03/175852s2zmpwjx8m215h82.png
2. 完整词条索引及其位置：
(1) 使用文本编辑软件，或从空白手工打字录入，或从大索引（若干原文词典的词头删重后的词条索引）进行增删修改
--> 例如使用EmEditor, 加载构词法文件进行【拼写检查】, 可以在编辑文本的时候提示拼写问题
--> 使用 @vbnet 的工具软件, 加载图片和索引, 点击词条获取XY坐标位置（帖子：20160710更新( 全部)_制作图片字典工具的试作 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=16663）
https://www.pdawiki.com/forum/data/attachment/forum/201406/29/191645kx48r1gzzh4r4xxg.png
https://www.pdawiki.com/forum/data/attachment/forum/201606/07/213648ijfosm5xyfqgxqky.png
(2) 使用@vbnet的的工具软件（还在测试中），自动画线、OCR、校对、一对一词条内容整体切图 一体化（@chigre3 修改优化）
帖子：https://www.pdawiki.com/forum/thread-19040-1-1.html
最优化自动画线-->核对-->文本框高亮匹配提示-->集中化的列表显示校对：
https://www.pdawiki.com/forum/data/attachment/forum/201611/10/051039evqgoz9g9x5ddvye.png
软件参数自定义设置的一些说明：
https://www.pdawiki.com/forum/data/attachment/forum/201611/10/051034nyivbfysevfgpfpf.png
全自动智能画线：
自动 完整单词区域 切图，导出一一对应的文本，方便后期制作【切图版图片词典】：
(3) 使用 @孤影 的工具软件（论坛无下载：图片版词典制作软件 2016年8月31日 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=17495&fromuid=174481）
--> 加载图片，配合按键精灵脚本，自动批量获取所有页面的词条XY坐标，导出词条所在区域的图片切片，FineReader进行OCR导出并整理OCR文本，得到一致数量的所有词条
--> 校验模式下对词头进行核对：程序会判断词条是否在大索引文本中是否有匹配，若存在，则绿色背景色，否则橙色背景色；两者均为提示作用，不代表一定对/错
https://www.pdawiki.com/forum/data/attachment/forum/201609/03/073235p01ggfsi19refx00.png
3. 导入数据至模板得文本：
(1) 设定好初始条件：
1. 几栏?↓下拉选择↓：2栏--> 一般均为2栏，目前所见仅《英汉大词典》为3栏
2. 图片宽度(123栏)：1547 --> 极为重要，计算词条DIV层的margin-top数值等等
3. 图片高度：2259--> 用于计算正常屏幕双栏显示时，右栏DIV层的整体上移百分比
4. 行距(高亮px)：20 --> 用于计算词条高亮的高度
5. 正文总页数：2297
页数差: -2297-->限于模板公式, 若页面无任何词条, 会出现整页及文本的内容无生成, 根据提示手动补充
6. 手机屏幕宽度(px)：360--> 用于计算CSS模板中双栏变为单栏显示的一些数值
7. 词典名(缩写)：XSDXH--> 用于CSS内限定用的名称等
8. 一般图片上距(px)：75--> 用于小屏幕中单栏显示时更加紧凑显示图片，隐藏不必要的空白内容
(2) 导入词条+坐标的数据：
https://www.pdawiki.com/forum/data/attachment/forum/201606/07/213651cc7ncd72k5enrd0n.png
(3) 按照顺序于单元格右下角出现＋时进行双击填充序列：［１］→［２］→……［９］→……［１２］→［１３］→［１４］
其中：
(A) ［９］选中W2单元格，右键，【刷新】
(B) ［１３］（T列）为词条及其文本内容，［１４］（V列）为页码及其文本内容，请将这两列数据【复制】到新建文本文件，保存为【UTF-8无签名BOM】的格式
(C) 请核对A12单元格（页数差: -X）。如果某页面无任何词条，则在［１４］中不会出现，需要手动添加页码及其文本内容。
https://www.pdawiki.com/forum/data/attachment/forum/201609/03/074813v6mdd7xmcxixzwix.png
(4) EXCEL里的 表里，输入部分页面的上下空白Y值，复制内容到CSS保存
(5) EXCEL里的 [附录索引] 表里，可以得到前言附录等页面的索引文本
(6) 按照替换说明，使用EmEditor和UltraEdit进行文本的替换（普通/正则）
(7) 使用MdxBuilder转换成 MDX/MDD
https://www.pdawiki.com/forum/data/attachment/forum/201609/04/024848w999p1dg230gh217.png
-----------------------------------------------------------------------------------------------------
附1：按照本模板制作的图片词典
1. 20160722更新《意汉词典》(绿砖) 全索引 精确定位 图片版【意大利语】
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=17116&fromuid=174481
2. 现代意大利语词典 意汉双解版
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=17729&fromuid=174481
3. 20160810《新西汉词典》全索引 精确定位 图片版【西班牙语】
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=17911&fromuid=174481
4. 20160825《葡汉词典》全索引 精确定位 自适应 图片版【葡萄牙语】
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=18033&fromuid=174481
5. 20160825《拉鲁斯法汉双解词典》全索引 精确定位 自适应 图片版【法语】
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=18035&fromuid=174481
6. 20160902更新《新时代西汉大词典》20页全索引 精确定位 图片版【西班牙语】
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=18072&fromuid=174481
其中6为使用0902模板制作，各个软件均完美支持！
-----------------------------------------------------------------------------------------------------
附2：相关帖子
1. 图片版词典，词头区域切片OCR，用FineReader识别
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=18046&fromuid=174481
2. 安卓版 Goldendict 支持 .mdx .mdd 的方法 (经验) --> 让GoldenDict安卓版加载图片版词典的方法
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=13437&fromuid=174481
3. 【20160902更新】全索引_精确定位_图片版_词典 工具+教程 --> 记录了Excel模板的更新记录和图片版词典的制作想法
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=13169&fromuid=174481
4. 20160710更新( 全部)_制作图片字典工具的试作 --> vbnet 的工具
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=16663&fromuid=174481
5. 图片版词典制作软件 2016年8月31日 --> 孤影 的工具
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=17495&fromuid=174481
zhu1234 发表于 2016-10-22 19:34
图片上的热区肿么与图片同时缩小？
原来的CSS模板里，默认情况：
屏幕宽度小于一定值（如360px），则：
div层固定大小……
屏幕宽度大于一定值（如361px），则：
div层100%屏幕宽度……
--------------------
你需要的情况刚好相反，因为图片宽度有限，你可以：
屏幕宽度小于一定值（如360px），则：
div层100%屏幕宽度
屏幕宽度大于一定值（如360px），则：
div层固定宽度（比如说图片本身的宽度值）
这样，就不会放大失真了，小的时候也会缩小 zhu1234 发表于 2016-10-22 10:34
能否出个模板，直接将文字显示在定位的图片上？用于不分栏的情况。
自己正则替代下啦 把单词页放到div 里就行啊 刚发现按 20161017_图片版词典万能模板_替换步骤.txt 中的说明替换后，词条末尾缺少</>
Q. and A.
<link rel="stylesheet" type="text/css" href="DCIE_P.css">
<DCIE_P>
<LIST_TOP><a href="entry://DCIE_0000_00_0">封面</a> | <a href="entry://DCIE_0000_00_1">内封</a> | <a href="entry://DCIE_0000_00_2">版权页</a> | <a href="entry://DCIE_0000_00_3">目录</a> | <a href="entry://DCIE_0000_00_4">前言</a><br/><b><a href="entry://DCIE_2298"><sup>1</sup>动词变位</a> | <a href="entry://DCIE_2329"><sup>2</sup>数词表</a> | <a href="entry://DCIE_2331"><sup>3</sup>货币名称</a> | <a href="entry://DCIE_2337"><sup>4</sup>化学元素</a> | <a href="entry://DCIE_2341"><sup>5</sup>计量单位</a> | <a href="entry://DCIE_2344"><sup>6</sup>西汉译音</a></b> | <a href="entry://DCIE_2345">参考书目</a></LIST_TOP>
<a href="entry://#2312_L1"><PAG_L><HW>Q. and A.</HW></PAG_L></a>
<PAG_T><a class="prev" href="entry://DCIE_2311">2311</a><a class="curr" href="entry://DCIE_2312">2312</a><a class="next" href="entry://DCIE_2313">2313</a></PAG_T>
<div class="ALL">
<div class="LT">
<a name="2312_L1" href="entry://Q. and A."><div class="HW_L_C" style="margin-top:21.83%"></div></a><a name="2312_L2" href="entry://Q in a corner"><div class="HW_L" style="margin-top:24.69%"></div></a><a name="2312_L3" href="entry://Q. T."><div class="HW_L" style="margin-top:32.58%"></div></a><a name="2312_L4" href="entry://quack titles"><div class="HW_L" style="margin-top:35.63%"></div></a><a name="2312_L5" href="entry://Quae fuerunt vitia, mores sunt"><div class="HW_L" style="margin-top:43.1%"></div></a><a name="2312_L6" href="entry://Quaerens quem devoret"><div class="HW_L" style="margin-top:51.14%"></div></a><a name="2312_L7" href="entry://quaff off"><div class="HW_L" style="margin-top:56.85%"></div></a><a name="2312_L8" href="entry://quail at/before"><div class="HW_L" style="margin-top:59.6%"></div></a><a name="2312_L9" href="entry://quail at"><div class="HW_L" style="margin-top:59.56%"></div></a><a name="2312_L10" href="entry://quail before"><div class="HW_L" style="margin-top:59.56%"></div></a><a name="2312_L11" href="entry://quail before→quail at/before"><div class="HW_L" style="margin-top:86.34%"></div></a><a name="2312_L12" href="entry://quake like an aspen leaf"><div class="HW_L" style="margin-top:89.1%"></div></a><a name="2312_L13" href="entry://quake ooze"><div class="HW_L" style="margin-top:94.43%"></div></a><a name="2312_L14" href="entry://quake with"><div class="HW_L" style="margin-top:99.9%"></div></a><a name="2312_L15" href="entry://Quaker City"><div class="HW_L" style="margin-top:120.78%"></div></a>
<div class="pic p_2312"><img src="2312.png"/></div>
</div>
<div class="RT">
<a name="2312_R1" href="entry://Quaker gun"><div class="HW_R" style="margin-top:21.83%"></div></a><a name="2312_R2" href="entry://Quaker/Quaker's meeting"><div class="HW_R" style="margin-top:37.82%"></div></a><a name="2312_R3" href="entry://Quaker meeting"><div class="HW_R" style="margin-top:37.77%"></div></a><a name="2312_R4" href="entry://Quaker's meeting"><div class="HW_R" style="margin-top:37.91%"></div></a><a name="2312_R5" href="entry://Quaker's bargain"><div class="HW_R" style="margin-top:67.26%"></div></a><a name="2312_R6" href="entry://qualified property"><div class="HW_R" style="margin-top:78.44%"></div></a><a name="2312_R7" href="entry://qualify as"><div class="HW_R" style="margin-top:96.9%"></div></a><a name="2312_R8" href="entry://qualify for"><div class="HW_R" style="margin-top:129.01%"></div></a>
<div class="pic p_2312"><img src="2312.png"/></div>
</div></div>
<PAG_T><a class="prev" href="entry://DCIE_2311">2311</a><a class="curr" href="entry://DCIE_2312">2312</a><a class="next" href="entry://DCIE_2313">2313</a></PAG_T>
Q in a corner
<link rel="stylesheet" type="text/css" href="DCIE_P.css">
<DCIE_P>
<LIST_TOP><a href="entry://DCIE_0000_00_0">封面</a> | <a href="entry://DCIE_0000_00_1">内封</a> | <a href="entry://DCIE_0000_00_2">版权页</a> | <a href="entry://DCIE_0000_00_3">目录</a> | <a href="entry://DCIE_0000_00_4">前言</a><br/><b><a href="entry://DCIE_2298"><sup>1</sup>动词变位</a> | <a href="entry://DCIE_2329"><sup>2</sup>数词表</a> | <a href="entry://DCIE_2331"><sup>3</sup>货币名称</a> | <a href="entry://DCIE_2337"><sup>4</sup>化学元素</a> | <a href="entry://DCIE_2341"><sup>5</sup>计量单位</a> | <a href="entry://DCIE_2344"><sup>6</sup>西汉译音</a></b> | <a href="entry://DCIE_2345">参考书目</a></LIST_TOP>
<a href="entry://#2312_L2"><PAG_L><HW>Q in a corner</HW></PAG_L></a>
<PAG_T><a class="prev" href="entry://DCIE_2311">2311</a><a class="curr" href="entry://DCIE_2312">2312</a><a class="next" href="entry://DCIE_2313">2313</a></PAG_T>
<div class="ALL">
<div class="LT">
<a name="2312_L1" href="entry://Q. and A."><div class="HW_L" style="margin-top:21.83%"></div></a><a name="2312_L2" href="entry://Q in a corner"><div class="HW_L_C" style="margin-top:24.69%"></div></a><a name="2312_L3" href="entry://Q. T."><div class="HW_L" style="margin-top:32.58%"></div></a><a name="2312_L4" href="entry://quack titles"><div class="HW_L" style="margin-top:35.63%"></div></a><a name="2312_L5" href="entry://Quae fuerunt vitia, mores sunt"><div class="HW_L" style="margin-top:43.1%"></div></a><a name="2312_L6" href="entry://Quaerens quem devoret"><div class="HW_L" style="margin-top:51.14%"></div></a><a name="2312_L7" href="entry://quaff off"><div class="HW_L" style="margin-top:56.85%"></div></a><a name="2312_L8" href="entry://quail at/before"><div class="HW_L" style="margin-top:59.6%"></div></a><a name="2312_L9" href="entry://quail at"><div class="HW_L" style="margin-top:59.56%"></div></a><a name="2312_L10" href="entry://quail before"><div class="HW_L" style="margin-top:59.56%"></div></a><a name="2312_L11" href="entry://quail before→quail at/before"><div class="HW_L" style="margin-top:86.34%"></div></a><a name="2312_L12" href="entry://quake like an aspen leaf"><div class="HW_L" style="margin-top:89.1%"></div></a><a name="2312_L13" href="entry://quake ooze"><div class="HW_L" style="margin-top:94.43%"></div></a><a name="2312_L14" href="entry://quake with"><div class="HW_L" style="margin-top:99.9%"></div></a><a name="2312_L15" href="entry://Quaker City"><div class="HW_L" style="margin-top:120.78%"></div></a>
<div class="pic p_2312"><img src="2312.png"/></div>
</div>
<div class="RT">
<a name="2312_R1" href="entry://Quaker gun"><div class="HW_R" style="margin-top:21.83%"></div></a><a name="2312_R2" href="entry://Quaker/Quaker's meeting"><div class="HW_R" style="margin-top:37.82%"></div></a><a name="2312_R3" href="entry://Quaker meeting"><div class="HW_R" style="margin-top:37.77%"></div></a><a name="2312_R4" href="entry://Quaker's meeting"><div class="HW_R" style="margin-top:37.91%"></div></a><a name="2312_R5" href="entry://Quaker's bargain"><div class="HW_R" style="margin-top:67.26%"></div></a><a name="2312_R6" href="entry://qualified property"><div class="HW_R" style="margin-top:78.44%"></div></a><a name="2312_R7" href="entry://qualify as"><div class="HW_R" style="margin-top:96.9%"></div></a><a name="2312_R8" href="entry://qualify for"><div class="HW_R" style="margin-top:129.01%"></div></a>
<div class="pic p_2312"><img src="2312.png"/></div>
</div></div>
<PAG_T><a class="prev" href="entry://DCIE_2311">2311</a><a class="curr" href="entry://DCIE_2312">2312</a><a class="next" href="entry://DCIE_2313">2313</a></PAG_T>
Q. T.
<link rel="stylesheet" type="text/css" href="DCIE_P.css">
这教程，好精美。。。。{:4_104:} 真佯细，多谢！ 这教程可以加精了吧，非常赞呀。 这教程我佩服，这要花多少心血来整理呀。
{:4_112:} yangxiups 发表于 2016-9-3 16:29
这教程我佩服，这要花多少心血来整理呀。
第一个原理图片做了挺久 I do hope I can make image version of MDX one day 作了几幅图，希望大家看得顺心也能看得明白~ 楼主辛苦了，谢谢！正想做一个 {:4_105:}气死了 dashuchong 发表于 2016-9-12 11:43
楼主辛苦了，谢谢！正想做一个
赶紧做一个出来 现在就没有看到其他人用这个模板制作的图片词典 billmin 发表于 2016-10-6 09:12
气死了
你在灌水吗？气死了？？ 本帖最后由 zhu1234 于 2016-10-22 10:36 编辑
能否出个模板，直接将文字显示在定位的图片上？用于不分栏的情况。 本帖最后由 zhu1234 于 2016-10-22 15:55 编辑
制作图解词典的利器。{:4_104:}
本帖最后由 zhu1234 于 2016-10-22 16:07 编辑
chigre3 发表于 2016-10-22 15:52
自己正则替代下啦 把单词页放到div 里就行啊
好的。。。搞定。。。 本帖最后由 zhu1234 于 2016-10-22 17:15 编辑
图像模糊怎么破？难道只能多留白？
zhu1234 发表于 2016-10-22 17:14
图像模糊怎么破？难道只能多留白？
图片不清晰？如果你想按照图片本身宽度显示 修改下css 里对图片的控制max-width chigre3 发表于 2016-10-22 19:13
图片不清晰？如果你想按照图片本身宽度显示 修改下css 里对图片的控制max-width
图片上的热区肿么与图片同时缩小？ 超赞的教程！慢慢学习。。。 thanks
one day i'll learn to make it 等着学完编程后就做！ zhenlei1994 发表于 2016-10-24 13:58
等着学完编程后就做！
不用等啊 用不到编程 依葫芦画瓢 一步一步来就行呢 chigre3 发表于 2016-10-24 18:43
不用等啊 用不到编程 依葫芦画瓢 一步一步来就行呢
好吧