现代Web应用中的智能截图工具：从Canvas到File System Access API的完整实现

📋 ScreenshotTool
├── 🔍 环境检测模块
├── 🎨 Canvas渲染模块  
├── 🏷️ 水印处理模块
├── 💾 文件保存模块
├── ✨ 用户体验模块
└── 🛡️ 错误处理模块

1// 环境检测和调试信息
2function logEnvironmentInfo() {
3  const info = {
4    protocol: window.location.protocol,
5    hostname: window.location.hostname,
6    isSecureContext: window.isSecureContext,
7    hasShowSaveFilePicker: 'showSaveFilePicker' in window,
8    userAgent: navigator.userAgent,
9    platform: navigator.platform
10  };
11
12  console.group('📋 截图工具环境检测');
13  console.log('🌐 协议:', info.protocol);
14  console.log('🏠 主机:', info.hostname);
15  console.log('🔒 安全上下文:', info.isSecureContext);
16  console.log('📁 文件系统API:', info.hasShowSaveFilePicker);
17  console.log('🖥️ 用户代理:', info.userAgent);
18  console.log('💻 平台:', info.platform);
19
20  if (!info.isSecureContext) {
21    console.warn('⚠️ 当前不在安全上下文中，File System Access API 不可用');
22    console.warn('💡 建议：使用 HTTPS 或 localhost 访问');
23  }
24
25  if (!info.hasShowSaveFilePicker) {
26    console.warn('⚠️ 当前浏览器不支持 showSaveFilePicker API');
27    console.warn('💡 建议：使用 Chrome 86+ 或 Edge 86+');
28  }
29
30  console.groupEnd();
31
32  return info;
33}

1// 保存截图
2async function saveScreenshot(canvas, key) {
3  try {
4    const timestamp = new Date()
5      .toISOString()
6      .replace(/T/, '_')
7      .replace(/:/g, '-')
8      .slice(0, 19);
9    const filename = `${key}_${timestamp}_screenshot.png`;
10
11    // 优先尝试现代文件系统API
12    if (isFileSystemAccessSupported()) {
13      try {
14        console.log('使用现代文件系统API保存文件');
15
16        const fileHandle = await window.showSaveFilePicker({
17          suggestedName: filename,
18          types: [
19            {
20              description: 'PNG图片',
21              accept: { 'image/png': ['.png'] }
22            }
23          ]
24        });
25
26        // 将canvas转换为blob
27        const blob = await new Promise((resolve, reject) => {
28          canvas.toBlob((blob) => {
29            if (blob) {
30              resolve(blob);
31            } else {
32              reject(new Error('Canvas转换为Blob失败'));
33            }
34          }, 'image/png');
35        });
36
37        // 写入文件
38        const writable = await fileHandle.createWritable();
39        await writable.write(blob);
40        await writable.close();
41
42        console.log('文件保存成功:', filename);
43        showFileFlyAnimation(filename);
44        return true;
45      } catch (err) {
46        if (err.name === 'AbortError') {
47          console.log('用户取消了保存操作');
48          return false;
49        }
50
51        console.warn('现代文件系统API失败，降级到传统方式:', err.message);
52        // 降级到传统下载方式
53        const result = downloadFile(canvas, filename);
54        if (result) {
55          showFileFlyAnimation(filename);
56        }
57        return result;
58      }
59    } else {
60      // 直接使用传统下载方式
61      console.log('使用传统下载方式保存文件');
62      const result = downloadFile(canvas, filename);
63      if (result) {
64        showFileFlyAnimation(filename);
65      }
66      return result;
67    }
68  } catch (err) {
69    console.error('保存截图失败:', err);
70    return false;
71  }
72}
73
74// 传统下载方式
75function downloadFile(canvas, filename) {
76  try {
77    // 创建下载链接
78    const url = canvas.toDataURL('image/png');
79    const link = document.createElement('a');
80    link.download = filename;
81    link.href = url;
82
83    // 添加到DOM并触发点击
84    document.body.appendChild(link);
85    link.click();
86
87    // 清理资源
88    setTimeout(() => {
89      document.body.removeChild(link);
90      // 注意：toDataURL生成的是data URL，不需要revokeObjectURL
91    }, 100);
92
93    return true;
94  } catch (err) {
95    console.error('传统下载方式失败:', err);
96    return false;
97  }
98}

1async function addWatermark(canvas, key, onComplete, onError) {
2  const watermarkImage = new Image();
3  watermarkImage.crossOrigin = 'Anonymous';
4  
5  watermarkImage.onload = async function () {
6    // 创建水印pattern
7    const canvasWater = document.createElement('canvas');
8    const ctxWater = canvasWater.getContext('2d');
9    
10    // 设置水印样式：旋转、透明度、重复模式
11    ctxWater.rotate((-20 * Math.PI) / 180);
12    ctxWater.globalAlpha = 0.1;
13    ctxWater.drawImage(watermarkImage, 40, 160, 200, 40);
14    
15    // 应用水印pattern
16    ctx.fillStyle = ctx.createPattern(canvasWater, 'repeat');
17    ctx.fillRect(0, 0, canvas.width, canvas.height);
18  };
19}

1// 保存原始渲染器设置
2const originalPreserveDrawingBuffer = renderer.preserveDrawingBuffer;
3const originalAlpha = renderer.alpha;
4
5// 优化截图质量的设置
6renderer.preserveDrawingBuffer = true;
7renderer.alpha = false;
8
9// 智能渲染：支持后处理管道
10if (composer && composer.passes && composer.passes.length > 0) {
11  composer.render(); // 包含后处理效果
12} else {
13  renderer.render(scene, camera); // 直接渲染
14}

1// 显示环境提示
2function showEnvironmentTip() {
3  if (!envInfo.isSecureContext || !envInfo.hasShowSaveFilePicker) {
4    // 创建提示元素
5    const tipEl = document.createElement('div');
6    tipEl.style.cssText = `
7      position: fixed;
8      top: 20px;
9      right: 20px;
10      background: #fff3cd;
11      border: 1px solid #ffeaa7;
12      border-radius: 8px;
13      padding: 16px;
14      max-width: 350px;
15      z-index: 10001;
16      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
17      font-size: 14px;
18      line-height: 1.5;
19    `;
20
21    let message = i18n.t('common.Screenshot Tips') + '📋：<br>';
22
23    if (!envInfo.isSecureContext) {
24      message +=
25        '• ' +
26        i18n.t(
27          'common.The current environment does not support advanced file saving functions'
28        ) +
29        '<br>';
30    }
31
32    message +=
33      '• ' +
34      i18n.t(
35        'common.The screenshot will be saved using the traditional download method'
36      );
37
38    tipEl.innerHTML = message;
39
40    // 添加关闭按钮
41    const closeBtn = document.createElement('button');
42    closeBtn.innerHTML = '×';
43    closeBtn.style.cssText = `
44      position: absolute;
45      top: 8px;
46      right: 8px;
47      background: none;
48      border: none;
49      font-size: 18px;
50      cursor: pointer;
51      color: #856404;
52    `;
53    closeBtn.onclick = () => tipEl.remove();
54
55    tipEl.appendChild(closeBtn);
56    document.body.appendChild(tipEl);
57
58    // 5秒后自动关闭
59    setTimeout(() => {
60      if (tipEl.parentNode) {
61        tipEl.remove();
62      }
63    }, 5000);
64  }
65}

1// 显示文件保存动效
2function showFileFlyAnimation(filename) {
3  // 创建主容器
4  const container = document.createElement('div');
5  container.style.cssText = `
6    position: fixed;
7    top: 50%;
8    left: 50%;
9    transform: translate(-50%, -50%);
10    z-index: 10000;
11    pointer-events: none;
12  `;
13
14  // 创建照片预览框
15  const photoFrame = document.createElement('div');
16  photoFrame.style.cssText = `
17    width: 120px;
18    height: 90px;
19    background: white;
20    border-radius: 8px;
21    padding: 8px;
22    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
23    position: relative;
24    transform: scale(0) rotateY(-90deg);
25    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
26  `;
27
28  // 创建照片内容
29  const photoContent = document.createElement('div');
30  photoContent.style.cssText = `
31    width: 100%;
32    height: 100%;
33    background: linear-gradient(45deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
34    border-radius: 4px;
35    display: flex;
36    align-items: center;
37    justify-content: center;
38    font-size: 24px;
39    position: relative;
40    overflow: hidden;
41  `;
42  photoContent.innerHTML = '🖼️';
43
44  // 创建扫描线效果
45  const scanLine = document.createElement('div');
46  scanLine.style.cssText = `
47    position: absolute;
48    top: 0;
49    left: -100%;
50    width: 100%;
51    height: 100%;
52    background: linear-gradient(90deg, transparent 0%, rgba(22, 194, 166, 0.3) 50%, transparent 100%);
53    transition: left 1.2s ease-in-out;
54  `;
55
56  // 创建文件夹图标
57  const folderIcon = document.createElement('div');
58  folderIcon.style.cssText = `
59    position: absolute;
60    bottom: -20px;
61    right: -20px;
62    width: 40px;
63    height: 40px;
64    background: linear-gradient(135deg, #16c2a6 0%, #14a085 100%);
65    border-radius: 8px;
66    display: flex;
67    align-items: center;
68    justify-content: center;
69    color: white;
70    font-size: 18px;
71    box-shadow: 0 4px 16px rgba(22, 194, 166, 0.4);
72    transform: scale(0);
73    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
74  `;
75  folderIcon.innerHTML = '📁';
76
77  // 创建保存进度条
78  const progressBar = document.createElement('div');
79  progressBar.style.cssText = `
80    position: absolute;
81    bottom: -40px;
82    left: 0;
83    right: 0;
84    height: 4px;
85    background: rgba(0,0,0,0.1);
86    border-radius: 2px;
87    overflow: hidden;
88  `;
89
90  const progressFill = document.createElement('div');
91  progressFill.style.cssText = `
92    height: 100%;
93    width: 0%;
94    background: linear-gradient(90deg, #16c2a6 0%, #14a085 100%);
95    border-radius: 2px;
96    transition: width 1.5s ease-out;
97  `;
98
99  // 创建文件名标签
100  const fileLabel = document.createElement('div');
101  fileLabel.style.cssText = `
102    position: absolute;
103    top: -50px;
104    left: 50%;
105    transform: translateX(-50%) translateY(-10px);
106    background: rgba(0, 0, 0, 0.8);
107    color: white;
108    padding: 6px 12px;
109    border-radius: 16px;
110    font-size: 12px;
111    font-weight: 500;
112    white-space: nowrap;
113    opacity: 0;
114    backdrop-filter: blur(10px);
115    transition: all 0.6s ease;
116  `;
117  fileLabel.textContent = filename;
118
119  // 创建成功图标
120  const successIcon = document.createElement('div');
121  successIcon.style.cssText = `
122    position: absolute;
123    top: 50%;
124    left: 50%;
125    transform: translate(-50%, -50%) scale(0);
126    width: 32px;
127    height: 32px;
128    background: #16c2a6;
129    border-radius: 50%;
130    display: flex;
131    align-items: center;
132    justify-content: center;
133    color: white;
134    font-size: 16px;
135    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
136  `;
137  successIcon.innerHTML = '✓';
138
139  // 组装元素
140  photoContent.appendChild(scanLine);
141  photoFrame.appendChild(photoContent);
142  photoFrame.appendChild(successIcon);
143  progressBar.appendChild(progressFill);
144  container.appendChild(photoFrame);
145  container.appendChild(folderIcon);
146  container.appendChild(progressBar);
147  container.appendChild(fileLabel);
148  document.body.appendChild(container);
149
150  // 动画序列
151  requestAnimationFrame(() => {
152    // 1. 照片出现
153    photoFrame.style.transform = 'scale(1) rotateY(0deg)';
154    fileLabel.style.opacity = '1';
155    fileLabel.style.transform = 'translateX(-50%) translateY(0)';
156
157    // 2. 扫描效果
158    setTimeout(() => {
159      scanLine.style.left = '100%';
160    }, 400);
161
162    // 3. 进度条填充
163    setTimeout(() => {
164      progressFill.style.width = '100%';
165    }, 600);
166
167    // 4. 文件夹出现
168    setTimeout(() => {
169      folderIcon.style.transform = 'scale(1)';
170    }, 1200);
171
172    // 5. 成功图标
173    setTimeout(() => {
174      successIcon.style.transform = 'translate(-50%, -50%) scale(1)';
175    }, 1600);
176
177    // 6. 飞向文件夹
178    setTimeout(() => {
179      photoFrame.style.transform = 'scale(0.3) translate(60px, 60px)';
180      photoFrame.style.opacity = '0';
181      fileLabel.style.opacity = '0';
182      progressBar.style.opacity = '0';
183    }, 2200);
184
185    // 7. 文件夹闪烁表示接收
186    setTimeout(() => {
187      folderIcon.style.transform = 'scale(1.2)';
188      folderIcon.style.background =
189        'linear-gradient(135deg, #14a085 0%, #0f766e 100%)';
190    }, 2600);
191
192    setTimeout(() => {
193      folderIcon.style.transform = 'scale(1)';
194    }, 2800);
195  });
196
197  // 清理元素
198  setTimeout(() => {
199    if (container.parentNode) {
200      container.parentNode.removeChild(container);
201    }
202  }, 3500);
203}