vue3使用html2canvas實現(xiàn)網(wǎng)頁截圖并下載功能的全過程

更新時間：2025年10月15日 08:53:35 作者：你的眼睛會笑

html2canvas是一個JavaScript庫,用于將HTML元素轉(zhuǎn)換為Canvas圖像,保留CSS樣式和布局,支持多種瀏覽器和圖片格式,在Vue等項目中應用廣泛,盡管有跨域、模糊等問題,通過配置優(yōu)化可有效解決

使用html2canvas實現(xiàn)網(wǎng)頁截圖并下載功能

什么是html2canvas

html2canvas是一個強大的JavaScript庫，能夠?qū)⒕W(wǎng)頁中的HTML元素轉(zhuǎn)換為Canvas圖像。

它通過讀取DOM元素、應用的樣式以及頁面布局信息，將這些內(nèi)容"繪制"到Canvas畫布上，最終可以導出為圖片格式。

核心功能

DOM元素轉(zhuǎn)圖片 ：將任意HTML元素轉(zhuǎn)換為圖片
樣式保留 ：保留CSS樣式、字體、顏色等視覺效果
跨瀏覽器兼容 ：支持主流現(xiàn)代瀏覽器
多種輸出格式 ：可導出為PNG、JPEG等格式

基本用法

import html2canvas from 'html2canvas';

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

// 使用html2canvas轉(zhuǎn)換
html2canvas(element).then(canvas => {
  // 轉(zhuǎn)換為圖片URL
  const imageUrl = canvas.toDataURL('image/png');
  
  // 創(chuàng)建下載鏈接
  const link = document.createElement('a');
  link.href = imageUrl;
  link.download = 'screenshot.png';
  link.click();
});

實際應用示例

在Vue項目中的實際應用

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, // 提高圖片質(zhì)量
      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
  }
}