如何使用JavaScript构建PDF故事板生成工具

自动填充空白标题

function captionFromText(t) {
    var s = String(t || '')
        .replace(/\s+/g, ' ')
        .trim();

    if (letters(s) < 3) {
        return '';
    }

    if (s.length <= 200) {
        return s;
    }

    var cut = s.slice(0, 200);
    var end = Math.max(
        cut.lastIndexOf('. '),
        cut.lastIndexOf('? '),
        cut.lastIndexOf('! '),
        cut.lastIndexOf('। ')
    );

    return end > 60
        ? cut.slice(0, end + 1)
        : cut.replace(/\s+\S*$/, '') + '…';
}

1. 将传入的值转换为字符串。
2. 将重复的空白字符替换为单个空格，并删除文本开头和结尾的空白字符。
3. 检查该文本是否包含足够的字母，以便将其用作标题。
4. 如果文本长度不超过200个字符，就直接返回整个文本；
5. 对于较长的文本，会尝试在句子结尾处截断标题。如果没有合适的截断点，就会删除未完成的最后一个单词，并添加省略号。

function fillFromText() {
    var bd = board(), list = bd.error ? [] : unique(bd.list), filled = 0, scans = 0;

    list.forEach(function (n) {
        if (captionFor(n)) { return; }

        var c = captionFromText(state.texts[n - 1]);

        if (c) {
            state.captions[n] = c;
            filled++;

            var ta = ui.grid.querySelector('[data-cap="' + n + '"]');
            if (ta) { ta.value = c; }
        } else if (isScan(n)) {
            scans++;
        }
    });

    if (!state.opts.captions && filled) {
        state opts.captions = true;
        savePrefs();
    }

    redrawSoon(0);

    if (!list.length) {
        toast(bd.error || '棋盘上没有页面内容。，' 'error');
        return;
    }

    toast(
        filled
            ? plural(filled, '标题', '标题们') +
              + ' 已从页面文本中提取出来。请在下方的卡片中对其进行编辑。' +
              (scans
                  ? ' ' + plural(scans, '已扫描的页面有', '已扫描的页面们有') +
                    + ' 没有文本内容；请使用OCR技术进行识别。' +
                  : '')
            : scans
                ? '这些空白页面都是没有文本内容的已扫描页面。请使用带有OCR功能的阅读工具进行处理。'
                : '所有的面板都已经配备了标题。'
    );
}

fillFromText()函数首先调用board()来获取当前选中的故事板页面。它使用unique()方法来确保不会重复处理相同的页面。

对于每一个被选中的页面，captionFor(n)会检查该页面是否已经存在标题。如果存在，则函数会跳过这个页面，从而避免覆盖用户已有的标题。

如果页面没有标题，函数会从state.texts中提取相关文本，并将其传递给captionFromText()进行处理。当提取到有用的文本后，函数会将生成的标题保存到state.captions中，并更新页面卡片中对应的文本区域。

如果某个页面没有可提取的文本，且被识别为需要扫描的页面，函数会增加扫描页面的计数器。用户可以使用OCR技术对这些页面进行单独处理。

最后，应用程序会根据需要为这些页面添加标题，保存更新后的设置，并安排预览内容的刷新。同时，它还会显示一条消息，说明有多少标题已经生成完成，或者是否还需要使用OCR技术。

这样，用户就可以自动生成标题，同时保留自己手动输入的描述内容。

更新预览内容

每当标题或相关设置发生变化时，都需要刷新故事板预览。

应用程序会使用一个定时器来避免在每次设置变更后立即重新绘制预览：

function redrawSoon(ms) {
    clearTimeout(drawTimer);
    drawTimer = setTimeout(
        drawPreview,
        ms === undefined ? 120 : ms
    );
}

redrawSoon()函数首先会使用clearTimeout()取消之前安排的预览更新任务，然后再使用setTimeout()重新安排drawPreview()的执行。

默认情况下，应用程序会在120毫秒后刷新预览内容。如果在这段时间内又有新的设置变更发生，之前的刷新计划就会被取消，系统会重新安排新的更新时间。

这种机制有助于避免用户在输入标题或调整设置时导致不必要的重复渲染。

绘制更新后的预览

一旦重新绘制的任务被安排好，drawPreview()函数就会根据当前的故事板配置来更新可视化的预览界面。

以下是应用程序中实际的实现代码：

async function drawPreview() {
    if (!state.doc) { return; }

    var my = ++drawToken, bd = board();
    refreshTags(bd);
    syncPanel();

    if (bd.error) {
        ui.boardMsg.textContent = bd.error;
        ui.sheetPos.textContent = '没有表格';
        uisheetCount.textContent = '';
        root.querySelectorAll('[data-needs-board]').forEach(function (b) {
            b.disabled = true;
        });
        return;
    }

    root.querySelectorAll('[data-needs-board']).forEach(function (b) {
        b.disabled = state.busy;
    });

    var L = bd.L, o = state.opts;
    state.sheet = clamp(state-sheet, 0, L.sheets - 1);

    ui.boardMsg.textContent = L.tight
        ? '标题文字占用的空间太小，建议减少标题行数、减少行数或调整字体大小。'
        : '';
    }

    ui_sheetPos.textContent = '第 ' + (state.sheet + 1) + ' 页，共 ' + L.sheets + ' 页';
    uisheetCount.textContent =
        plural(bd.list.length, '面板', '面板们') + ' 在 ' +
        plural(L.sheets, '页', '页们') + ', ' +
        PAPER NAMES[o.paper] + ' ' + o.orient;

    q('[data-act="sheet-prev"]').disabled = state-sheet <= 0;
    q('[data-act="sheet-next"]').disabled = state.sheet >= L.sheets - 1;

    ui_sheetWrap.style.aspectRatio = L.W + ' / ' + L.H;

    var cssW = ui.sheetWrap.clientWidth || 600;
    var dpr = Math.min(window.devicePixelRatio || 1, 2);
    var k = cssW * dpr / L.W;

    var off = document.createElement('canvas');
    off.width = Math.round(L.W * k);
    off.height = Math.round(L.H * k);

    var done = await drawSheet(
        off.getContext('2d'),
        o,
        bd.list,
        L,
        state.sheet,
        k,
        'full',
        function (n, w, h) {
            return my === drawToken
                ? cachedPic(n, w, h)
                : Promise.resolve(null);
        }
    );

    if (!done || my !== drawToken) { return; }

    ui-sheet.width = off.width;
    ui.sheet.height = off.height;
    ui_sheet.getContext('2d').drawImage(off, 0, 0);

    off.width = 1;

    var start = statesheet * L.per;
    var on = bd.list.slice(start, start + L.per);

    ui-sheet.setAttribute(
        'aria-label',
        '第 ' + (state.sheet + 1) + ' 页，共 ' + L.sheets + ' 页：' +
        (on.length === 1 ? '第 ' + on[0] : '第 ' + on.join(', ') +
    );

    ui-sheet.setAttribute('data-drawn', String(statesheet + 1));
}

该函数首先会检查是否已加载PDF文档，随后调用board()函数来获取选中的页面并计算故事板的布局。

drawToken这个值有助于防止旧的预览渲染操作覆盖新的渲染结果。此外，该函数还会调用refreshTags()和syncPanel()来更新页面信息及设置面板的内容。

接下来，它会检查所选的故事板是否存在任何错误；如果选择有效，就会计算当前页码的位置，并更新页码计数器、面板数量、纸张信息以及“上一页”和“下一页”按钮。

然后，该函数会根据可用的预览宽度及设备的像素比例来计算画布的缩放比例。为了限制渲染工作量，设备的像素比例被设定为不超过2。

绘制完成后，该函数会检查当前操作是否仍在继续进行中；如果仍在继续，就会将临时画布上的内容复制到可见的预览画布上。

最后，通过将临时画布的宽度设置为1来释放它所占用的资源。同时，应用程序还会更新预览界面的辅助说明文字，并记录哪些页面已经被绘制出来。

这样的处理方式使得用户能够在调整标题或设置后无需每次都下载新的PDF文件，就能看到故事板的变化情况。

选择故事板布局

该工具支持三种布局样式：网格布局、带注释的面板布局以及电影胶片条布局。每种布局都是为不同类型的项目设计的。

网格布局会将PDF页面按行和列进行排列，这种布局非常适合用于查看演示文稿幻灯片、漫画页或文档内容。

带注释的面板布局在每页下方提供了额外的书写空间，因此非常适用于制作讲座笔记、进行规划或复习视觉材料。

电影胶片条布局会将页面排列成一系列连续的帧，这种布局非常适合用于规划视频内容、分镜或场景设计。

用户选择的布局样式会保存在应用程序的状态中。当用户更换布局样式时，应用程序会自动调整列数和行数，以提供合适的默认设置。

这样用户就可以在不同的故事板页面之间切换，并在下载最终结果之前查看自己所做的修改。

调整标题显示效果

标题有助于解释每页上展示的内容。

应用程序提供了启用标题、选择字体、更改文字大小以及控制标题行数的选项。

用户还可以选择是否显示面板边框和页码。

这些设置会被保存在stateopts中。syncPanel()函数会更新相应的控件设置，使其与当前的应用程序状态保持一致。

以下是具体的实现代码：

function syncPanel() {
    var o = state.opts;

    ['layout', 'cols', 'rows', 'paper', 'orient', 'label',
     'lines', 'tsize', 'font', 'colors'].forEach(function (f) {
        q('[data-field="' + f + '"]').value = String(o[f]);
    });

    q('[data-field="captions"]').checked = o.captions;
    q('[data-field="frame"]').checked = o.frame;
    q('[data-field="numbers"]').checked = o.numbers;

    q('[data-field="gap"]').value = String(o.gap);
    q '[data-out="gap-val"]').textContent = o.gap + ' 毫米';

    q('[data-field="pages"]').value = state.pages;

    if (document.activeElement !== q('[data-field="title"]')) {
        q('[data-field="title"]').value = state.title;
    }

    var strip = o.layout === 'strip';

    q '[data-out="cols-label"]').textContent =
        strip ? '每个条带中的帧数' : '列数';

    q('[data-out="rows-label"]').textContent =
        strip ? '每页中的条带数' : '行数';

    q('[data-field="lines"]').disabled =
        !o.captions || o.layout === 'notes';

    q('[data-field="frame"]').disabled = strip;

    ui.listWrap.hidden = state.pages !== 'list';
}

该函数会从stateopts中读取当前的设置选项，并更新相应的控件。例如，它会设置选中的字体、文字大小、标题行数以及纸张设置。

对于特定布局类型，该函数还会进行相应的处理。在“电影条带”布局模式下，列数和行数的标签会分别显示为“每个条带中的帧数”和“每页中的条带数”；当关闭标题显示功能或选择“带有注释的面板”布局时，标题行数的控件也会被禁用。

将标题适配到面板内部

较长的标题需要适应面板内可用的显示空间。应用程序会使用wrap()辅助函数，根据画布的可用宽度将文本分割成多行。

以下是实际绘图代码中如何使用该辅助函数的示例：

if (o.captions && captionFor(n)) {
    ctx.font = '400 ' + fs + 'px ' + FONTS[o.font];
    ctx.fillStyle = C.ink;

    var maxL = cell.notes
        ? Math.max(1, Math.floor(
            (t.y * k + t.h * k - y + lh - fs) / lh
        ))
        : o.lines;

    lines = wrap(
        ctx,
        captionFor(n),
        t.w * k,
        Math.min(maxL, cell.notes ? 40 : o_lines)
    );

    lines.forEach(function (ln, j) {
        ctx.fillText(ln, t.x * k, y + j * lh);
    });
}

在故事板各页之间切换

如何使用“上一页”和“下一页”按钮

case 'sheet-prev':
    if (state.sheet > 0) {
        state-sheet--;
        drawPreview();
    }
    break;

case 'sheet-next':
    state_sheet++;
    drawPreview();
    break;

该应用程序还会防止用户跳转到不存在的页面。在drawPreview()函数中，程序会检查当前所在的页码，并在必要时禁用“上一页”和“下一页”按钮：

state-sheet = clamp(state.sheet, 0, L.sheets - 1);

uisheetPos.textContent =
    '第' + (state_sheet + 1) + '页，共' + L.sheets页；

q('[data-act="sheet-prev"]').disabled = state(sheet <= 0;
q('[data-act="sheet-next"]').disabled =
    state-sheet >= L.sheets - 1;

clamp()函数确保用户选择的页面编号始终处于有效范围内。页面计数器从1开始显示当前页码，同时也会显示总页数。在第一张表格上，“上一个”按钮是处于禁用状态的，而在最后一张表格上，“下一个”按钮也是处于禁用状态的。这样的设计使得在查看大型文档时更加方便，因为无需一次性显示所有的表格内容。

使用OCR阅读扫描后的页面

有些PDF文件包含可选择的文本，而另一些则只包含打印页的扫描图像。

PDF.js可以从含有实际文本数据的页面中提取文本，但无法直接从仅包含图像的扫描页面中提取文字。

为了解决这类问题，该应用程序提供了使用Tesseract.js的OCR功能。

当用户选择“使用OCR阅读扫描后的页面”时，程序会识别那些尚未添加字幕的扫描页面，并利用OCR引擎对这些页面进行处理。

在需要时加载Tesseract.js

该应用程序仅会在用户请求使用OCR功能时才会加载Tesseract.js。它会首先检查这个库是否已经存在；如果仍在加载中，就会重用之前的加载请求。

以下是实际的loadTesseract()实现代码：

var tessPromise = null;

function loadTesseract() {
    if (window.Tesseract) {
        return Promise.resolve(window.Tesseract);
    }

    if (tessPromise) {
        return tessPromise;
    }

    tessPromise = new Promise(function (resolve, reject) {
        var s = document.createElement('script');
        s.src = TESS + 'tesseract.min.js';
        s.async = true;

        s.onload = function () {
            if (window.Tesseract) {
                resolve(window.Tesseract);
            } else {
                tessPromise = null;
                reject(new Error('engine'));
            }
        };

        s.onerror = function () {
            tessPromise = null;
            reject(new Error('engine'));
        };

        document.head.appendChild(s);

        setTimeout(function () {
            reject(new Error('engine'));
        }, 45000);
    });

    return tessPromise;
}

该函数会首先检查window.Tesseract，看OCR库是否已经加载完成。如果已经加载完毕，就会直接返回这个库；如果仍在加载中，就会重用之前的加载请求。

如果OCR库尚未加载完成，程序就会创建一个新的脚本元素，将其源代码设置为Tesseract.js库的路径，然后将其添加到文档中。onload和onerror事件处理器会用来判断加载是否成功。

创建OCR处理线程

一旦OCR库加载完成，程序就会创建一个专门用于识别英文文本的Tesseract处理线程。

以下是实际的runOcr()函数中的相关代码：

var T = await loadTesseract();
checkCancel();

var w = await T.createWorker('eng', 1, {
    workerPath: TESS + 'worker.min.js',
    corePath: TESS_CORE,
    logger: function (m) {
        if (!m || token !== state.loadToken || !state.busy) {
            return;
        }

        if (/loading language/i.test(m.status)) {
            setProgress(
                m.progress || 0,
                '正在获取英文语言数据……'
            );
        } else if (/recogniz/i.test(m.status)) {
            setProgress(
                (done + (mprogress || 0)) / list.length,
                '正在阅读第' + list[done] + '页……'
            );
        }
    }
});

state.worker = w;
checkCancel();

await w.setParameters({ debug_file: '/dev/null' });

createWorker()方法使用英语语言数据来初始化OCR引擎。工作进程文件路径与核心文件路径会告诉Tesseract.js从何处加载所需的辅助文件。

日志系统会记录语言加载及文本识别过程的进展情况。应用程序会利用这些信息，在OCR运行期间更新进度显示界面。

从扫描页面中识别文本

该应用程序会逐个处理每一张符合条件的扫描页面，在将其发送给Tesseract.js之前，会先以较高的分辨率渲染这些页面。

以下是runOcr()函数中用于处理页面的实际代码片段：

for (; done < list.length; done++) {
    checkCancel();

    var n = list[done],
        page = await state.doc.getPage(n),
        b = page.getViewport({ scale: 1 });

    var c = await renderPage(
        n,
        Math.min(b.width * 300 / 72, 2600),
        Math.min(b.height * 300 / 72, 2600)
    );

    checkCancel();

    var png = await pngBytes(c);
    c.width = 1;

    var res = await w.recognize(png);

    checkCancel();

    if (token !== state.loadToken) {
        return;
    }

    var cap = captionFromText(res.data && res.data.text);

    if (cap && !captionFor(n)) {
        state.captions[n] = cap;

        var ta = ui.grid.querySelector('[data-cap="' + n + '"]');

        if (ta) {
            ta.value = cap;
        }
    }
}

该函数会获取每一张扫描后的PDF页面，并计算其原始尺寸；随后会以大约300 DPI的分辨率渲染这些页面，其最大显示尺寸为2,600像素。

pngBytes()辅助函数会将渲染后的图像数据转换为PNG格式。Tesseract.js会通过w.recognize(png)接收这些数据，并返回识别结果。

应用程序会将识别得到的文本传递给captionFromText()函数进行清理和优化处理；如果处理后的结果有用，且该页面尚未添加标题信息，就会将其保存到state.captions中，并更新相应的标题字段。

此外，应用程序还会检查是否有人取消了操作，并确认PDF文件的加载过程仍在进行中，才会最终更新结果显示界面。

处理完成后，应用程序会提示用户查看生成的标题信息。需要注意的是，OCR技术并不能保证能正确识别所有文字；图像质量、手写字体的清晰度、不常见的字体类型以及页面的排版方式都可能影响识别结果。

用户在下载最终生成的PDF故事板之前，应该先仔细核对这些标题内容。

生成最终的PDF故事板

<当用户对布局和标题内容满意后，该应用程序就可以生成最终的PDF文件了。>

此过程使用PDF-lib来创建新的PDF文档。应用程序会为每个故事板页面生成一个输出页面，然后将原始的PDF页面放置在计算出的位置上，并添加故事板的标题、标签和说明文字。

创建PDF文档

实际的应用程序会使用exportPdf()函数来生成最终结果。它首先创建一个新的PDF文档，然后检查原始的PDF页面是否可以以矢量格式被嵌入到新文档中。

以下是实际实现代码的第一部分：

async function exportPdf(snap, token) {
    await engine();

    var PL = window.PDFLib,
        L = snap.L,
        o = snap.o,
        list = snap.list;

    var out = await PL.PDFDocument.create(),
        src = null,
        embedded = {};

    if (state.vector) {
        try {
            src = await PL.PDFDocument.load(
                state.bytes.slice(0),
                { updateMetadata: false }
            );
        } catch (e) {
            src = null;
        }
    }

    var k = exportScale(L, 300, 14e6);

    for (var s = 0; s < L.sheets; s++) {
        checkCancel();

        if (token !== state.loadToken) {
            return;
        }

        setProgress(
            s / L.sheets,
            '正在处理第' + (s + 1) + '页，共' + L.sheets + '页…'
        );

        var page = out.addPage([L.W, L.H]);
        var c = document.createElement('canvas');

        c.width = Math.round(L.W * k);
        c.height = Math.round(L.H * k);

        var drawn = await drawSheet(
            c.getContext('2d'),
            o,
            list,
            L,
            s,
            k,
            'overlay',
            null
        );

        if (!drawn) {
            return;
        }
    }

该函数首先使用engine()等待所需的PDF库加载完成，然后通过PDFDocument.create()创建一个新的PDF文档。

snap参数包含了所选布局、选项及页面列表的副本。应用程序会利用这些信息来确保导出结果符合用户的选择设置。

state.vector这一检查用于判断原始PDF文件是否可以以矢量格式被嵌入到新文档中。同时，应用程序还会计算出一个适用于300 DPI分辨率的渲染比例，并限制最终的像素数量。

循环会为每个故事板页面生成一个输出PDF页面，并以overlay模式调用drawSheet()函数，以便在原始PDF页面上添加标题、面板标签和说明文字。

保留原始PDF页面

当支持矢量嵌入功能时，应用程序会直接将原始PDF页面嵌入到新文档中，而不会将其转换为普通图像。

以下代码片段展示了它是如何处理每一个被选中的面板的。

for (var i = 0; i < drawn.length; i++) {
    checkCancel();

    var d = drawn[i],
        r = d.rect,
        yb = L.H - r.y - r.h;

    page.drawRectangle({
        x: r.x,
        y: yb,
        width: r.w,
        height: r.h,
        color: PL.rgb(1, 1, 1)
    });

    if (src) {
        var sp = src.getPage(d.n - 1);

        if (!embedded[d.n]) {
            var cb = sp.getCropBox();

            embedded[d.n] = await out.embedPage(sp, {
                left: cb.x,
                bottom: cb.y,
                right: cb.x + cb.width,
                top: cb.y + cb.height
            });
        }

        var em = embedded[d.n],
            rot = ((sp.getRotation().angle % 360) + 360) % 360;

        var turned = rot === 90 || rot === 270,
            sx = r.w / (turned ? em.height : em.width);

        var ew = em.width * sx,
            eh = em.height * sx,
            at = { x: r.x, y: yb };

        if (rot === 90) {
            at = { x: r.x, y: yb + ew };
        } else if (rot === 180) {
            at = { x: r.x + ew, y: yb + eh };
        } else if (rot === 270) {
            at = { x: r.x + eh, y: yb };
        }

        page.drawPage(em, {
            x: at.x,
            y: at.y,
            width: ew,
            height: eh,
            rotate: PL.degrees(-rot)
        });
    }

该应用程序会根据原始PDF页面的页码来获取 해당页面的内容，然后使用embedPage()方法将该页面嵌入到新的PDF文档中。

embedded对象用于缓存已经嵌入过的页面，这样就不会重复嵌入相同的页面了。

代码还会检查原始页面的旋转角度，并在绘制之前调整其位置和尺寸，这样可以确保在将页面放入故事板面板中时，它们能够保持正确的显示方向。

处理受保护的PDF文件

如果无法将原始PDF文件作为矢量图像嵌入到新文档中，应用程序会采用栅格化处理方式作为替代方案。

以下是具体的替代代码：

else {
    var pic = await renderPage(
        d.n,
        r.w * k,
        r.h * k
    );

    var jpg = await new Promise(function (res) {
        pic.toBlob(function (b) {
            b.arrayBuffer().then(function (a) {
                res(new Uint8Array(a));
            });
        }, 'image/jpeg', 0.92);
    });

    pic.width = 1;

    page.drawImage(
        await out.embedJpg(jpg),
        {
            x: r.x,
            y: yb,
            width: r.w,
            height: r.h
        }
    );
}

在这种情况下，应用程序会先将原始PDF页面渲染到画布上，然后将其转换为JPEG图像数据，最后再将这些图像嵌入到相应的故事板面板中。

当无法进行矢量化嵌入时，就会使用这种替代方案，尤其是对于那些无法按照常规矢量处理流程进行处理的受保护PDF文件而言。

添加标题并保存PDF文件

在将原始页面的图片或矢量内容添加到PDF中之后，应用程序会再添加故事板的标题、标签、说明文字以及其他绘图元素，这些元素会被作为覆盖层显示在PDF页面上。

以下代码片段展示了如何添加这些覆盖层以及如何保存最终的PDF文件：

var over = await out.embedPng(await pngBytes(c));
c.width = 1;

page.drawImage(over, {
    x: 0,
    y: 0,
    width: L.W,
    height: L.H
});

await nextFrame();

当所有页面都处理完毕之后，应用程序会检查是否有人取消了操作，然后生成最终的PDF文件：

checkCancel();

setProgress(1, '正在保存PDF文件…');

out.setTitle(state.title || state.base + '故事板');
out.setCreator('AllInOneTools PDF故事板');
out.setProducer('AllInOneTools (pdf-lib)');

var bytes = await out.save();

if (token !== state.loadToken) {
    return;
}

save(
    new Blob([bytes], { type: 'application/pdf' }),
    state.base + '-storyboard.pdf'
);

toast(
    '已保存' + plural(L.sheets, '页', '张') +
    '为' + state.base + '-storyboard.pdf文件。'
);

embedPng()方法会将故事板的覆盖层添加到PDF页面中，这些覆盖层包含了标题、面板标签、说明文字等各种视觉元素。

随后，应用程序会设置PDF文件的元数据，将文档保存为字节格式，并生成一个可供下载的PDF文件。

在整个导出过程中，系统会不断更新进度信息并检查是否有人取消了操作；这对于处理包含多页的故事板来说尤其有用。

最终的PDF文件会将原始的页面内容与故事板的布局及说明文字结合起来，从而形成一个可以下载、分享或打印的完整文件。

下载PNG格式的故事板页面

如果用户不需要PDF格式的文件，也可以选择下载PNG格式的单独页面。

应用程序会将每一页完整的故事板内容渲染成200 DPI分辨率的PNG图片。如果故事板只包含一页，浏览器会直接下载一个PNG文件；如果包含多页，应用程序会把它们打包成一个ZIP压缩文件。

将故事板导出为PNG格式

应用程序在exportJob()函数中处理PNG文件的导出工作。首先它会计算出渲染所需的缩放比例，然后依次处理每一页故事板内容。

以下代码片段展示了具体的PNG文件导出实现过程：

var k = exportScale(L, 200, 16e6),
    files = [];

for (var s = 0; s < L.sheets; s++) {
    checkCancel();

    setProgress(
        s / L.sheets,
        '正在绘制第' + (s + 1) + '页，共' + L.sheets + '页……'
    );

    var c = document.createElement('canvas');

    c.width = Math.round(L.W * k);
    c.height = Math.round(L.H * k);

    var ok = await drawSheet(
        c.getContext('2d'),
        o,
        list,
        L,
        s,
        k,
        'full',
        function (n, w, h) {
            checkCancel();
            return renderPage(n, w, h);
        }
    );

    if (!ok) { return; }

    files.push({
        name: state.base + '-storyboard-sheet-' +
            pad2(s + 1) + '.png',
        data: await pngBytes(c)
    });

    c.width = 1;
}

if (files.length === 1) {
    save(
        new Blob([files[0].data], { type: 'image/png' }),
        state.base + '-storyboard.png'
    );
} else {
    save(makeZip(files), state.base + '-storyboard-sheets.zip');
}

toast(
    files.length === 1
        ? '故事板已成功导出为PNG文件。'
        : '共' + files.length + '页故事板内容已被打包成ZIP文件保存。'
);

该应用程序使用exportScale()函数来计算在保持画布像素数量不超过1600万的前提下、适合200 DPI分辨率的渲染比例。 对于每一页内容，程序都会创建一个画布，并以full模式调用drawSheet()函数。这样就能绘制出PDF页面的预览图，同时还会显示故事板的标题、标签、说明文字以及其他用户选定的设置内容。 pngBytes()辅助函数会将处理完成的画布数据转换为PNG格式文件。每张生成的图片都会被添加到files数组中，其文件名会包含对应的页面编号。 在处理完所有页面后，程序会检查最终生成了多少个PNG文件。如果只有一页内容需要导出，那么该页面会直接以PNG格式下载；如果有多页内容，那么它们会被打包成一个ZIP压缩文件，这一过程是通过makeZip()函数来完成的。 这种格式非常方便在演示文稿、消息发送或其他应用中分享故事板的预览图。

下载单页图片

第三种导出选项是“页面图片（ZIP格式）”。 与“PNG页面文件”选项不同，这种导出方式会生成故事板中所选PDF页面的单个图片文件。 程序会分别渲染每一页内容，然后将生成的PNG文件放入一个ZIP压缩包中。

导出单张PDF页面

实际上，这个功能是在exportJob()函数中实现的。程序首先会生成一份包含所有选定页面的列表，然后分别渲染每一页内容。 以下是具体的实现代码：

var pages = unique(list),
    out = [];

for (var i = 0; i < pages.length; i++) {
    checkCancel();

    setProgress(
        i / pages.length,
        '正在保存第' + pages[i] +
        '页（共' + pages.length + '页）…'
    );

    var pg = await state.doc getPage(pages[i]),
        vb = pg.getViewport({ scale: 1 }),
        sc = Math.min(
            2,
            Math.sqrt(12e6 / (vb.width * vb.height))
        );

    var pc = await renderPage(
        pages[i],
        vb.width * sc,
        vb.height * sc
    );

    out.push({
        name: 'panel-' +
            pad2(list.indexOf(pages[i]) + 1) +
            '-page-' + pad2_pages[i]) + '.png',
        data: await pngBytes(pc)
    });

    pc.width = 1;
}

save(makeZip(out), state.base + '-panels.zip');

toast(
    '已成功保存' +
    plural(out.length, '页图片', '页图片') +
    '到ZIP文件中。'
);

首先，该函数会调用unique()方法来去除选定列表中的重复页面编号。 然后，程序会分别处理每一页内容。getPage()方法用于获取原始PDF页面，而getViewport()方法则用来获取该页面的尺寸信息。 通过计算合适的渲染比例，可以将页面的分辨率限制在2范围内，同时确保渲染后的图像尺寸大约在1200万像素左右。这样在处理较大规模的页面内容时，可以有效控制内存使用量。renderPage()函数用于生成页面图像，而pngBytes()函数则将canvas转换为PNG格式的数据。

每张生成的图片都会被添加到out数组中，其文件名中会包含该图片在布局中的位置以及原始PDF文档中的页码。这样的命名方式有助于人们识别这些图片，并保持它们在故事板中的原有顺序。

最后，makeZip()函数会将所有生成的PNG图片打包成一个ZIP文件，浏览器会自动下载这个文件。

当用户希望单独处理PDF文档中的某些页面而不是整个故事板时，这个功能非常有用。

性能与重要注意事项

渲染大型PDF文件或生成高分辨率图像会消耗大量的浏览器内存。

该应用程序通过使用页面预览缓存、临时canvas对象、进度报告功能以及取消操作机制来有效管理这类任务。

为了获得更好的处理效果，在处理大型文档时，每页应使用较少的面板元素；如果故事板中包含大量面板，使用A3尺寸的纸张也会帮助节省空间。

请注意，用户的布局设置会保存在设备上，但PDF文件及其中的文字说明仍然会保留在当前浏览器标签页中。因此在关闭标签页之前，请务必先下载已完成的作品。

演示：PDF故事板生成器

您可以在这里尝试使用这个成品应用程序：

PDF故事板生成器 – AllInOneTools

只需上传PDF文件，调整页面布局，添加文字说明，自定义故事板内容，然后即可下载最终结果。

结论

开发这个PDF故事板生成器，实际上是将多种实用的浏览器技术结合在了一个应用程序中。

PDF.js负责处理PDF文件的加载与页面渲染；Tesseract.js可对扫描后的页面进行文本识别（此功能为可选）；PDF-lib则用于生成最终的故事板PDF文件；而HTML canvas则用于显示预览效果及导出图片。

通过使用JavaScript将这些组件连接起来，我们便能够打造出一个实用的工具，用来整理演示文稿中的幻灯片、漫画页面、脚本文件等各类PDF文档。 这个项目还展示了基于浏览器的应用程序如何能够在本地处理文档，而无需用户将文件上传到服务器上。

有了这套完整的工作流程，用户就可以将普通的PDF页面转换成结构清晰的故事板文件，从而更方便地查看、打印或分享这些内容。