在这里插入代码片## 为什么需要"零上传"工具
传统在线工具站的核心问题：你的文件离开了自己的设备。
- 合同PDF被上传到陌生服务器
- 身份证照片留存在某处机房
- 服务器存储成本转嫁为使用限制
我开发的 Vaultool（vaultool.com）采用了完全不同的方案：所有处理100%在浏览器本地完成，打开F12的Network面板可以验证，零字节离开你的设备。
- 服务器存储成本转嫁为使用限制
10个关键浏览器API
1. SubtleCrypto — 哈希计算
// 替代第三方MD5库，用浏览器原生APIconsthashBuffer=awaitcrypto.s ubtle.digest('SHA-256',data);consthashHex=Array.from(newUint8Array(hashBuffer)).map(b=>b.toString(16).padStart(2,'0')).join('');```不再引入`js-md5`等第三方包，浏览器原生支持SHA-1/256/384/512。 ### 2. Canvas API — 图片处理```javascript// 图片压缩：调整quality参数canvas.toBlob(blob=>{constcompressed=n ewFile([blob],name,{type:'image/jpeg'});},'image/jpeg',0.7);// 图片裁剪：drawImage指定区域ctx.drawImage(img,sx,sy,sw,sh,0,0,dw,dh);压缩、裁剪、格式转换、加水印，全部基于Canvas 2D Context。
3. FileReader — 文件读取
// 拖拽上传文件后本地读取reader.readAsArrayBuffer(file);reader.readAsText(file);r eader.readAsDataURL(file);拖拽文件到浏览器后，FileReader负责本地读取，不需要上传到服务器。
4. URL.createObjectURL — 临时文件URL
// 生成本地Blob URL，用于预览和下载consturl=URL.createObjectURL(blob);// 使用后释放内存URL.revokeObjectURL(url);处理完成后直接生成下载链接，文件不经过任何服务器。
5. Web Workers — 大文件处理
//主线程constworker=newWorker('pdf-worker.js');worker.postMessage({files});worker.onmessage=(e)=>{// 接收处理结果};// pdf-worker.jsself.onmessage=async(e)=>{constresult=awaitprocessPDF(e.data.files);self.postMessage(result);};```超过10MB的PDF合并放到Worker线程，UI零卡顿。 ### 6. Blob — 二进制数据处理```javascript// 创建Blob对象用于下载constblob=newBlob([pdfBytes],{type:'application/pdf'});// 从Blob生成File对象constfile=newFile([blob],'merged.pdf',{type:'application/pdf'});处理后的数据封装为Blob，可以直接下载或进一步操作。
7. IndexedDB — 本地存储
// 存储处理历史记录constdb=awaitopenDB('vaultool',1);awaitdb.put('history',{tool:'pdf-merge',timestamp:Date.now()});用户的操作历史存在本地IndexedDB，不上传服务器。
8. requestAnimationFrame — 动画优化
// 处理进度条动画functionupdateProgress(percent){requestAnimationFrame(()=>{progressBar.style.width=percent+'%';});}大文件处理时的进度反馈，用rAF保证60fps流畅度。
9. Drag and Drop API — 文件拖拽
// 拖拽区域dropZone.addEventListener('drop',(e)=>{e.preventDefault();constfiles=Array.from(e.dataTransfer.files);// 直接本地处理});dropZone.addEventListener('dragover',(e)=>e.preventDefault());用户体验：直接拖文件到浏览器，无需上传表单。
10. TextEncoder/TextDecoder — 编码处理
// Base64编解码constencoder=newTextEncoder();constdecoder=newTextDecoder();constencoded=btoa(String.fromCharCode(...encoder.encode(text)));纯前端Base64编解码，不依赖服务器处理。
实际性能数据
| 操作 | 文件大小 | 耗时 | 内存峰值 |
|–
----|------|------|------|
| PDF合并（50页） | 15MB | 8s | 120MB |
| 图片压缩（JPG 70%） | 5MB | 2s | 45MB |
| JSON格式化 | 10MB | 1.5s | 80MB |
| SHA-256哈希 | 20MB | 3s | 35MB |
对比上传到服务器的方案：省了上传时间（10MB文件在10Mbps上行下需8s），总耗时更短。
工具覆盖
目前Vaultool涵盖50+工具，分为4大类：
- PDF工具：合并、拆分、压缩、转图片、加水印
- 图片工具：压缩、裁剪、格式转换、加
水印、调色板生成
- 图片工具：压缩、裁剪、格式转换、加
- 开发工具：JSON格式化、Base64编解码、正则测试、UUID生成、JWT解析、哈希计算
- 文本工具：字数统计、Markdown编辑器、文本对比、大小写转换
全部免费，不用注册，打开即用。
- 文本工具：字数统计、Markdown编辑器、文本对比、大小写转换
中文版：vaultool.com/zh/
踩过的坑
- PDF.js大文件内存溢出：50页以上PDF一次性load会导致崩溃，改为分页加载策略
- Safari的toBlob兼容性：部分Safari版本不支持canvas.toBlob，降级到toDataURL
- 中文文件名下载编码：Content-Disposi
tion头中中文需要encodeURIComponent处理
- 中文文件名下载编码：Content-Disposi
- Worker中无法使用DOM API：Canvas操作必须在主线程，只有数据计算能放Worker
- CORS限制图片处理：跨域图片需要先通过fetch下载到本地再处理
项目地址：vaultool.com（中文版：vaultool.com/zh/）
所有工具100%本地运行，隐私优先。欢迎试用反馈！
