【HTML+CSS+JS】海东青便利小工具之A3卷子转A4分割+打印

海东青1013

创作初心：孩子上小学，老师发送A3卷子图片需要转换为A4图片，孩子不会，遂创作这个三件套。

下载链接在最下面，解压时点击右键→解压到桌面即可使用，感谢版主指导，谢谢^_^


目前最新版本V5.0，具体改动如下：
一、增加了离线\在线双模式，并在正上方有提示；
二、增加了操作教程；
三、引入离线模式后打印机预览和下载出现卡顿，优化了下代码；
四、如果大家有啥新的需要和需求，留言即可啊~
五、网盘暂时不开分享，大家直接下载即可，文件解压密码52pojie


第一段：主界面参数

[JavaScript] 纯文本查看 复制代码

    <div class="row">
        <button class="btn-rotate-left">向左&#8635;转图</button>
        <button class="btn-rotate-right">向右&#8634;转图</button>
        <button class="btn-rotate-180">180°旋转&#8597;图</button>
        <button class="btn-export">打包+下载A4卷子</button>
        <button class="btn-print">批量打印A4卷子（打印机自己选择）</button>
    </div>

    <div id="preview">
  <div style="line-height:1.8; font-size:14px; padding:10px;">
    &#128193; 1、点击上方【选择文件】按键；
    <br>
    &#128444;&#65039; 2、选择图片文件，图片选择技巧：
    <br>
      &#9989; (1) 单一图片：直接点击鼠标左键选中图片 → 点击对话框【打开】；

第二段：增加在线离线的部分代码

[JavaScript] 纯文本查看 复制代码

document.addEventListener('DOMContentLoaded', () => {
    const tip = document.getElementById('modeTip');
    if (navigator.onLine) {
        tip.textContent = "✅网络已链接-在线模式";
        tip.style.color = "#28a745";
    } else {
        tip.textContent = "📶网络未链接-离线模式";
        tip.style.color = "#fd7e18";
    }

    if (state.selectFolderName) {
        document.getElementById('showPath').innerText = "已默认：" + state.selectFolderName;
        document.getElementById('saveDefault').checked = true;

第三部分：图片分割的部分代码

[JavaScript] 纯文本查看 复制代码

function generateCutAndPreview() {
    state.cutImages = [];
    state.previewEl.innerHTML = '';

    for (const { img, name } of state.rawImages) {
        // 画布创建（目前曲面屏存在显示问题）
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const w = img.width, h = img.height;

        if (state.currentRotate === 90 || state.currentRotate === 270) {
            canvas.width = h;
            canvas.height = w;
        } else {
            canvas.width = w;
            canvas.height = h;
        }

        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate(state.currentRotate * Math.PI / 180);
        ctx.drawImage(img, -w / 2, -h / 2);

        // 分割左右
        const half = Math.floor(canvas.width / 2);
        const left = getImageFromCanvas(canvas, 0, 0, half, canvas.height);
        const right = getImageFromCanvas(canvas, half, 0, canvas.width - half, canvas.height);

        state.cutImages.push({ name, left, right });

        // 预览DOM（试试这个方法，看看图片预览速度）
        const div = document.createElement('div');
        div.className = 'item';
        div.innerHTML = `<p style="font-size:13px;margin-bottom:5px;">&#128196; ${name}</p>
                         <img src="${left}" style="max-width:48%;">
                         <img src="${right}" style="max-width:48%;">`;
        state.previewEl.appendChild(div);

emlwqemlwq

感觉设计不太好，我自己做了一个，可以自动将A3或B3页面自动切割并导出为A4或B5 PDF。软件界面见图。

海东青1013

少污污 发表于 2026-5-7 12:15
你这个，打包为本地运行啊。哈~

收到，这几天下县比较忙，尽量明天左右改好。谢谢您和前面的大哥建议。

苏紫方璇

请在帖子中插入部分关键代码
本版块仅限分享编程技术和源码相关内容，发布帖子必须带上关键代码和具体功能介绍
代码插入方法可见板块置顶帖
【公告】发帖代码插入以及添加链接教程（有福利）
https://www.52pojie.cn/thread-713042-1-1.html
(出处: 吾爱破解论坛)

不依baya

这个很不错，A3卷子用A4打印太小了

fuxingjun674

这个不错啊。可以实现一键A3纸，打印到A4纸！

海东青1013

fuxingjun674 发表于 2026-5-6 10:50
这个不错啊。可以实现一键A3纸，打印到A4纸！解压密码？

感谢您的评价。^_^

jun269

A3打印成一张不是更好吗？

dork

除此之外，可以用扫描**王一类的APP导入图片后分割成二半，也可以实现，而且顺便可以将图片清晰化。

海东青1013

jun269 发表于 2026-5-6 10:53
A3打印成一张不是更好吗？

我问了很多老师和家长，告知很多家里没有A3打印机，有的也基本都是黑白色的A4打印机。

海东青1013

dork 发表于 2026-5-6 10:57
除此之外，可以用扫描**王一类的APP导入图片后分割成二半，也可以实现，而且顺便可以将图片清晰化。

这个您说的对，但孩子还小，自己打印存在要操作多个软件，且还要手动去调整\裁剪，所以改成HTMl的，为的就是让孩子自己整去，家长可以偷懒下。

fuxingjun674

jun269 发表于 2026-5-6 10:53
A3打印成一张不是更好吗？

问题是没有A3打印机