纯前端生成海报下载方案

<template> 
  <!-- 弹窗遮罩与 Loading 状态 --> 
  <div class="custom-overlay" v-show="visible"> 
    <div v-loading="downloadLoading" element-loading-text="海报生成中..."> 
      
      <!-- 【核心截图区域】给 html2canvas 转换的节点 --> 
      <div id="poster-node" class="poster-container"> 
        <!-- 1. 海报背景图 --> 
        <img class="poster-bg" src="@/assets/img/share/bg.png" alt="background" /> 
        
        <div class="poster-content"> 
          <!-- 2. 用户与业务信息（略写样式） --> 
          <div class="user-info"> 
            <div class="user-name">{{ userName }}</div> 
            <div class="share-text">向你分享了一个视频</div> 
          </div> 
          
          <!-- 3. 外部视频封面图（注意：这里的 src 会在步骤二中特殊处理） --> 
          <img class="video-cover" :src="coverBase64" :crossorigin="(coverBase64 && coverBase64.startsWith('http')) ? 'anonymous' : undefined" /> 
          
          <!-- 4. 底部带 Logo 的二维码 --> 
          <img class="qr-code" :src="qrCodeUrl" /> 
        </div> 
      </div> 
      
    </div> 
  </div> 
</template> 

async function getCoverBase64(coverUrl) { 
  try { 
    // 1. 追加随机时间戳，打破浏览器无 CORS 头的本地缓存限制 
    const cacheBustedUrl = `${coverUrl}${coverUrl.includes('?') ? '&' : '?'}_t=${Date.now()}_${Math.random().toString(36).slice(2)}`; 
    
    // 2. 携带 cors 模式主动发起 XHR 请求（使用 XHR 以兼容老旧浏览器）
    return await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', cacheBustedUrl, true);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status >= 200 && xhr.status < 300) {
          // 3. 使用 FileReader 将 Blob 转换为 Base64 字符串 
          const reader = new FileReader();
          reader.onloadend = () => resolve(reader.result);
          reader.onerror = reject;
          reader.readAsDataURL(xhr.response);
        } else {
          reject(new Error('HTTP status ' + xhr.status));
        }
      };
      xhr.onerror = () => reject(new Error('XHR error'));
      xhr.send();
    });
  } catch (error) { 
    console.error('图片转 Base64 失败:', error); 
    // 降级方案：千万不要在此处拼接 _t，直接回退使用最原始的 URL 
    return coverUrl; 
  } 
} 

import QRCode from 'qrcode';

async function generateQRCodeWithLogo(url) {
  // 1. 创建用于绘制的 canvas 元素
  const canvas = document.createElement('canvas');
  
  // 2. 生成高容错率（H）的二维码，防止中心被 Logo 遮挡后无法扫码
  await QRCode.toCanvas(canvas, url, {
    margin: 1,
    width: 100,
    errorCorrectionLevel: 'H' 
  });
  
  const ctx = canvas.getContext('2d');
  
  // 3. 加载本地 Logo 图片
  const logo = new Image();
  logo.crossOrigin = 'Anonymous';
  logo.src = require('@/assets/img/share/logo.png');
  await new Promise(resolve => { logo.onload = resolve; });
  
  // 4. 计算中心位置与 Logo 尺寸 (建议为二维码宽度的 1/4)
  const logoSize = 24; 
  const center = canvas.width / 2;
  const x = center - logoSize / 2;
  const y = center - logoSize / 2;
  
  // 5. 绘制白色圆形底图（给 Logo 留出白边，使其更清晰）
  ctx.fillStyle = '#FFFFFF';
  ctx.beginPath();
  ctx.arc(center, center, logoSize / 2 + 2, 0, 2 * Math.PI);
  ctx.fill();
  
  // 6. 裁剪圆形区域并绘制 Logo
  ctx.save();
  ctx.beginPath();
  ctx.arc(center, center, logoSize / 2, 0, 2 * Math.PI);
  ctx.clip();
  ctx.drawImage(logo, x, y, logoSize, logoSize);
  ctx.restore();
  
  // 7. 导出最终图片
  return canvas.toDataURL('image/png');
}

import html2canvas from 'html2canvas';

async function handleDownload() {
  const node = document.getElementById('poster-node');
  if (!node) return;

  try {
    // 1. 将 DOM 节点渲染为 Canvas
    const canvas = await html2canvas(node, {
      useCORS: true,         // 允许跨域图片
      allowTaint: true,      // 允许污染画布
      scale: 2,              // 提升清晰度，解决高分屏模糊问题
      backgroundColor: null, // 保持透明背景
      
      // 【优化点】忽略页面中的 script 和 iframe 标签，防止阻塞或异常，保留样式标签
      ignoreElements: (element) => {
        const tag = element.tagName?.toUpperCase();
        return tag === 'SCRIPT' || tag === 'IFRAME';
      }
    });

    // 2. 导出图片数据
    const dataUrl = canvas.toDataURL('image/png');

    // 3. 动态创建 <a> 标签触发浏览器本地下载
    const link = document.createElement('a');
    link.download = `分享海报_${Date.now()}.png`;
    link.href = dataUrl;
    
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

  } catch (error) {
    console.error('海报生成失败:', error);
  }