vue3使用html2canvas实现网页截图并下载功能的全过程

import html2canvas from 'html2canvas';

// 获取目标元素
const element = document.getElementById('target-element');

// 使用html2canvas转换
html2canvas(element).then(canvas => {
  // 转换为图片URL
  const imageUrl = canvas.toDataURL('image/png');
  
  // 创建下载链接
  const link = document.createElement('a');
  link.href = imageUrl;
  link.download = 'screenshot.png';
  link.click();
});

const captureAndSave = async (e, str) => {
  globalLoading.value = true
  
  try {
    const element = document.getElementById('weatherPoster' + str);
    if (!element) return;

    const canvas = await html2canvas(element, {
      backgroundColor: null, // 透明背景
      scale: 2, // 提高图片质量
      logging: false,
      useCORS: true, // 允许跨域图片
      allowTaint: true // 允许渲染跨域图片
    });

    const imageUrl = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.href = imageUrl;
    link.download = '城市天气画报.png';
    link.click();
    
    message.success('图片保存成功');
  } catch (error) {
    console.error('生成图片失败:', error);
    message.error('生成图片失败');
  } finally {
    globalLoading.value = false
  }
}