当前位置：首页 > HTML

h5怎么实现截图并保存

2026-01-15 20:53:39HTML

实现H5截图并保存的方法

使用HTML5的Canvas结合JavaScript可以实现截图功能。以下是一种常见的实现方式：

使用html2canvas库

html2canvas是一个流行的JavaScript库，可以将HTML元素渲染为Canvas：

h5怎么实现截图并保存

// 引入html2canvas库
import html2canvas from 'html2canvas';

// 截图函数
function takeScreenshot(element) {
  html2canvas(element).then(canvas => {
    // 转换为图片URL
    const image = canvas.toDataURL('image/png');

    // 创建下载链接
    const link = document.createElement('a');
    link.download = 'screenshot.png';
    link.href = image;
    link.click();
  });
}

// 调用示例
takeScreenshot(document.body);

纯Canvas实现

如果不使用第三方库，可以使用Canvas的drawImage方法：

h5怎么实现截图并保存

function captureAndSave() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 设置Canvas尺寸
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // 绘制页面内容
  ctx.drawImage(document.documentElement, 0, 0);

  // 转换为DataURL
  const dataURL = canvas.toDataURL('image/png');

  // 触发下载
  const link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = dataURL;
  link.click();
}

处理跨域资源

如果页面包含跨域图片，需要设置CORS属性：

const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = 'https://example.com/image.jpg';

移动端适配

在移动设备上，需要考虑viewport和像素密度：

const scale = window.devicePixelRatio;
canvas.width = element.offsetWidth * scale;
canvas.height = element.offsetHeight * scale;
ctx.scale(scale, scale);