纯前端 PNG/JPG 转 PDF 工具(无需服务器,源码分享)

纯前端 PNG/JPG 转 PDF 工具(无需服务器,源码分享)

纯前端 PNG/JPG 转 PDF 工具(无需服务器,源码分享)

✨ 一个完全运行在浏览器中的图片转 PDF 工具,不依赖后端、不上传文件、保护隐私,支持拖拽、排序、预览、批量导出,代码开源,一键部署!

🌐 在线演示

👉 https://longsongline.github.io/png-to-pdf/

在这里插入图片描述

打开即可使用,无需注册、无需登录,所有处理都在你的浏览器中完成!


📦 功能特性

  • 纯前端实现:基于 jsPDF + FileReader,无任何服务端依赖
  • 隐私安全:图片不会上传到任何服务器,全程本地处理
  • 多格式支持:PNG、JPG、BMP、TIFF、SVG(自动转 PNG)
  • 灵活输出
    • 合并为单个 PDF(每张图一页)
    • 每张图生成独立 PDF
  • 交互友好
    • 拖拽上传 / 点击选择
    • 图片预览(带缩放)
    • 手动排序 / 按文件名排序
    • 删除选中 / 清空全部
    • 文件大小显示、操作日志提示

💻 使用方法

  1. 打开 在线工具
  2. 拖入或点击选择多张图片
  3. 调整顺序(可选)
  4. 选择输出模式
  5. 点击「导出 PDF」即可下载!
⚠️ 首次加载会从 CDN 加载 jsPDF 库(约 100KB),请确保网络畅通。

🧩 技术实现

  • 核心库jsPDF v2.5.1
  • 编码规范:UTF-8(避免中文乱码)
  • 兼容性:现代浏览器(Chrome / Edge / Firefox / Safari)

关键逻辑:

  • 使用 FileReader 读取本地文件为 DataURL
  • SVG 自动转为 PNG 再嵌入 PDF
  • 利用 addPage() 实现多页布局
  • 响应式 UI + 拖拽排序 + 图片预览模态框

📂 源码 & 部署

🔗 GitHub 仓库

🚀 如何部署自己的版本?

  1. Fork 本仓库
  2. 进入仓库 → Settings → Pages
  3. 设置 Source 为 main 分支 + / (root)
  4. 保存,等待 1 分钟
  5. 访问:https://你的用户名.github.io/png-to-pdf/
💡 完全免费!GitHub Pages 自动提供 HTTPS。

📝 注意事项

  • 中文乱码问题
    请确保 index.htmlUTF-8 无 BOM 编码保存(推荐直接在 GitHub 网页编辑器修改)。
  • 大图处理慢
    浏览器内存有限,建议单图不超过 10MB。
  • PDF 分辨率
    默认按 A4 尺寸居中缩放,保持原始比例。

❤️ 开源协议

本项目为 MIT 协议,欢迎 Fork、Star、提 PR!

如果你觉得有用,欢迎点赞 👍 或分享给需要的朋友!


作者:longsongline
更新时间:2026年3月
关键词:前端工具、图片转PDF、纯前端、jsPDF、GitHub Pages、无后端

Read more

FPGA实现任意角度图像旋转_(图像旋转原理部分)

1.摘要         书接上回,介绍完Cordic原理部分FPGA实现任意角度图像旋转_(Cordic算法原理部分),和代码FPGA实现任意角度图像旋转_(Cordic算法代码部分),得到了至关重要的正余弦数值就可以进行旋转公式的计算了。        旋转没什么太多原理,看了很多资料感觉是描述的非常复杂, 其实本质就是实现两个公式,非整那么多花里胡哨的。所以我就按照我当时的编写思路记录一下。 2.图像旋转代码设计思路         2.1 旋转后的图像尺寸                 在一副图像经过旋转后,原本像素的位置肯定会发生变化,图像总的面积虽然保持不变但是各别位置的尺寸会改变,这个应该很好理解。比如一副100x100像素的图像进行旋转,我们只需要获得它的最长距离也就是对角线的尺寸作为旋转后的图像的显示范围。这样无论怎样旋转都能完整显示图像。                 如下代码,Pixel_X和Pixel_Y为旋转后图像的尺寸。ROW和COL为原始图像尺寸,利用勾股定理求出对角线的值即可。 reg [12:0] row_size ; reg [

clawdbot (openclaw) + discord 机器人部署指南学习教程

clawdbot (openclaw) + discord 机器人部署指南学习教程

本文介绍了基于 ClawdBot(OpenClaw)框架在 Discord 平台部署 AI 对话机器人的完整流程。内容包括:Discord Application 与 Bot 的创建配置、OAuth2 权限管理、pnpm 全局安装、Daemon 服务配置、多模型 API 接入(支持智谱 GLM 等主流大模型)、Gateway 服务启动与调试等核心环节。 一、网络要求 * 魔法 * 确保网络能够访问Discord服务 * TUN模式(关键哦) 二、Discord平台配置 2.1 访问Discord开发者平台 访问地址:https://discord.com/developers/applications 2.2 创建应用程序 1. 登录Discord开发者平台

【花雕学编程】Arduino BLDC 之模糊动态任务调度机器人

【花雕学编程】Arduino BLDC 之模糊动态任务调度机器人

基于 Arduino 的 BLDC 模糊动态任务调度机器人,是一种将模糊逻辑控制理论应用于机器人多任务管理与执行机构(BLDC 电机)协同控制的智能系统。该方案的核心在于解决传统基于固定优先级或时间片轮转的调度算法在面对非结构化环境时,对“不确定性”和“实时性”处理能力不足的问题。 1、主要特点 模糊逻辑驱动的优先级动态仲裁 这是系统区别于传统实时操作系统的核心,它将离散的“任务优先级”转化为连续的“任务紧迫度”。 * 多输入变量融合: 系统不再仅依据任务注册的时间或预设的静态优先级来调度,而是将传感器数据(如障碍物距离、电池电量、目标接近度)作为模糊输入变量。 * 语言值描述与规则库: 通过定义“很近”、“较远”、“极低”、“正常”等模糊集合,将数值型数据转化为语言型描述。例如,规则库中可定义:“如果前方障碍物距离为‘很近’且电池电量为‘充足’,则避障任务的优先级为‘最高’,巡航任务的优先级为‘零’”。 * 平滑的优先级过渡: 相较于传统算法中任务优先级的“

2026年,我整理了中国 200 多家机器人(具身智能)公司名单

2026年,我整理了中国 200 多家机器人(具身智能)公司名单

近几年,机器人行业突然变得异常热闹。尤其是2022年9月特斯拉首次亮相具身智能人形机器人 Optimus 之后,国内外都掀起了一波浪潮。2023年之后,国内出现了一批新的人形机器人公司,为了更好地理解这个行业,我整理了一份中国机器人企业名单,包含200 多家企业,涵盖人形机器人、工业机器人、移动机器人、服务机器人、特种机器人等领域。 注:名单中的企业排序没有特殊含义,仅表示本人收集信息的先后顺序。 序号企业简称总部成立时间主营产品网址企业全称1优必选深圳2012年人形机器人、轮式机器人https://ubtrobot.com深圳市优必选科技股份有限公司2宇树科技杭州2016年四足机器狗、人形机器人https://unitree.com宇树科技股份有限公司3智元上海2023年四足、轮式、双足人形机器人、具身模型https://zhiyuan-robot.com智元创新(上海)科技股份有限公司4海康机器人杭州2016年机器视觉、移动机器人https://hikrobotics.com杭州海康机器人股份有限公司5傅利叶上海2015年康复机器人、双足人形机器人、灵巧手https://f