当前位置：首页 > JavaScript

js实现截图保存

2026-02-03 03:53:52JavaScript

使用HTML2Canvas库实现截图

HTML2Canvas是一个流行的JavaScript库，可以将网页元素或整个页面转换为Canvas图像，便于保存或分享。

安装HTML2Canvas库：

npm install html2canvas

基本实现代码：

import html2canvas from 'html2canvas';

const element = document.getElementById('target-element');
html2canvas(element).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = imgData;
  link.click();
});

使用Canvas API直接截图

对于简单的截图需求，可以直接使用Canvas API实现：

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const video = document.querySelector('video'); // 或任意元素

canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);

const imgData = canvas.toDataURL('image/jpeg');
const link = document.createElement('a');
link.download = 'screenshot.jpg';
link.href = imgData;
link.click();

使用第三方服务截图

对于需要截图远程网页的情况，可以考虑使用第三方API服务：

const apiKey = 'YOUR_API_KEY';
const url = 'https://api.screenshotapi.com/capture';
const params = {
  url: 'https://example.com',
  viewport: '1280x720',
  full_page: true
};

fetch(`${url}?${new URLSearchParams(params)}`, {
  headers: { 'Authorization': `Bearer ${apiKey}` }
})
.then(response => response.blob())
.then(blob => {
  const link = document.createElement('a');
  link.download = 'website_screenshot.png';
  link.href = URL.createObjectURL(blob);
  link.click();
});

浏览器扩展截图方案

开发浏览器扩展时，可以使用chrome.tabs.captureVisibleTab API：

chrome.tabs.captureVisibleTab(null, {format: 'png'}, function(dataUrl) {
  chrome.downloads.download({
    url: dataUrl,
    filename: 'screenshot.png'
  });
});

注意事项

跨域资源可能导致截图失败，需要配置CORS策略
截图大尺寸页面可能消耗较多内存
某些CSS属性可能无法正确渲染到Canvas中
移动端设备需要考虑视口和DPI适配问题

高级功能实现

实现带有水印的截图：

js实现截图保存

html2canvas(element).then(canvas => {
  const ctx = canvas.getContext('2d');
  ctx.font = '20px Arial';
  ctx.fillStyle = 'rgba(255,255,255,0.5)';
  ctx.fillText('Watermark', 20, 30);

  const imgData = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.download = 'screenshot_with_watermark.png';
  link.href = imgData;
  link.click();
});