截图保存与分享：从Canvas到用户手中的完整链路

好，咱们接着聊。上一节我们把视频帧截取到了Canvas里，但截图这东西，光在画布上看着可不行——得能存下来、能分享出去，才算真正有用。这一节我就带你走完最后这几步：保存为PNG或JPEG、控制图片质量、实现下载，以及用Web Share API直接分享。

1. 导出格式与质量：toDataURL 与 toBlob

Canvas本身提供了两个导出方法：toDataURL 和 toBlob。前者返回一个base64字符串，后者返回一个Blob对象。我个人习惯用 toBlob，因为Blob更适合传给Web Share API，而且处理大图片时内存占用更友好。

// 导出为PNG（默认）
canvas.toBlob(function(blob) {
  // 处理blob
}, 'image/png');

// 导出为JPEG，质量设为0.8
canvas.toBlob(function(blob) {
  // 处理blob
}, 'image/jpeg', 0.8);

第二个参数是MIME类型，第三个参数是质量系数（0到1之间）。PNG是无损格式，所以质量参数对它无效。JPEG才有意义。

2. 实现图片下载：动态创建链接

下载功能其实就几行代码。核心思路是：把Blob转成ObjectURL，创建一个隐藏的 <a> 标签，模拟点击。

function downloadBlob(blob, fileName) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// 使用示例
canvas.toBlob(function(blob) {
  downloadBlob(blob, 'screenshot.png');
}, 'image/png');

这里有个坑：URL.revokeObjectURL 一定要在下载触发后调用。我曾经在调用 click() 之前就释放了URL，结果下载的文件是空的。嗯，这个顺序很重要。

3. Web Share API：一键分享截图

Web Share API 是PWA时代的产物。它允许网页调用系统原生的分享面板，把文件、文本、链接直接发给其他应用。对于截图分享来说，这体验比下载再上传好太多了。

async function shareBlob(blob, title) {
  const file = new File([blob], 'screenshot.png', { type: blob.type });
  
  if (navigator.share && navigator.canShare({ files: [file] })) {
    try {
      await navigator.share({
        title: title,
        text: '来看看这个截图',
        files: [file]
      });
      console.log('分享成功');
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error('分享失败:', err);
      }
    }
  } else {
    // 降级处理：走下载
    downloadBlob(blob, 'screenshot.png');
  }
}

注意 navigator.canShare 这个检查——不是所有浏览器都支持分享文件。我遇到过一些安卓浏览器，虽然支持 navigator.share，但不支持文件分享，这时候就得降级到下载。

4. 完整流程整合：从截图到分享

把上面这些串起来，一个完整的截图保存与分享功能就出来了。下面这张图展示了整个数据流：

你看，整个链路其实很清晰。从Canvas拿到像素数据，通过 toBlob 导出为文件，然后根据用户操作走下载或分享。我一般在项目中会封装成一个 ScreenshotManager 类，把截图、保存、分享都放进去，方便复用。

5. 完整代码示例

class ScreenshotManager {
  constructor(canvas) {
    this.canvas = canvas;
  }

  // 导出为Blob
  getBlob(type = 'image/png', quality = 0.9) {
    return new Promise((resolve) => {
      this.canvas.toBlob((blob) => {
        resolve(blob);
      }, type, quality);
    });
  }

  // 下载
  async download(fileName = 'screenshot.png', type = 'image/png', quality = 0.9) {
    const blob = await this.getBlob(type, quality);
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    setTimeout(() => URL.revokeObjectURL(url), 1000);
  }

  // 分享
  async share(title = '截图', type = 'image/png', quality = 0.9) {
    const blob = await this.getBlob(type, quality);
    const file = new File([blob], 'screenshot.png', { type });

    if (navigator.share && navigator.canShare({ files: [file] })) {
      try {
        await navigator.share({ title, files: [file] });
      } catch (err) {
        if (err.name !== 'AbortError') throw err;
      }
    } else {
      // 降级下载
      this.download('screenshot.png', type, quality);
    }
  }
}

// 使用
const manager = new ScreenshotManager(canvas);
// 下载JPEG，质量0.7
manager.download('photo.jpg', 'image/jpeg', 0.7);
// 分享PNG
manager.share('我的截图');

6. 格式与质量的选择建议

场景	推荐格式	质量参数	说明
UI界面截图	PNG	—	文字清晰，无压缩伪影
摄像头画面	JPEG	0.8	文件小，画质可接受
需要透明背景	PNG	—	JPEG不支持透明
分享到社交平台	JPEG	0.9	兼容性好，体积适中
存档/打印	PNG	—	无损，保留全部细节

说白了，没有绝对最好的格式，只有最适合当前场景的选择。我个人在项目中通常默认用PNG，只有在明确需要减小文件体积时才切到JPEG。

好，这一节的内容就到这。截图保存与分享这块其实不复杂，但细节不少——格式选择、质量控制、降级处理，每一步都影响用户体验。你把这些代码整合到自己的项目里，稍微调调参数，就能跑得很稳。

---