纯前端实现海报生成与下载方案

Vue 实战：纯前端生成带中心 Logo 二维码的分享海报

在日常 Web 开发中，这类需求相当普遍：用户点击分享按钮后，前端需立刻生成一张融合用户信息、业务数据以及专属二维码的海报图片。为节省服务器处理费用，采用纯前端方案无疑是最经济高效的实现路径。

接下来，我们以一个“视频或通知类分享海报”组件为例进行拆解。整套方案依赖三个核心工具——html2canvas 和 qrcode，外加 Vue 构建的 DOM 结构。本文将重点讨论一个经典难点：跨域图片导致 Canvas 被污染，这个问题无法绕过，必须提前加以防范。

步骤一：构建海报的 DOM 结构

第一步实际上非常简单：按设计稿把海报样式完整书写出来。关键技巧在于为最外层容器指定一个明确的 ID，例如 poster-node，并在外部包裹一层全屏遮罩层。这样后续截图时就能实现精准定位与捕获。

<template>
  
  <div class="custom-overlay" v-show="visible">
    <div v-loading="downloadLoading" element-loading-text="海报生成中...">
      
      
      <div id="poster-node" class="poster-container">
        
        <img class="poster-bg" src="@/assets/img/share/bg.png" alt="background" />
        
        <div class="poster-content">
          
          <div class="user-info">
            <div class="user-name">{{ userName }}div>
            <div class="share-text">向你分享了一个视频div>
          div>
          
          
          <img class="video-cover" :src="coverBase64" crossorigin="anonymous" />
          
          
          <img class="qr-code" :src="qrCodeUrl" />
        div>
      div>
      
    div>
  div>
template>

步骤二：解决外部图片跨域污染 Canvas 的难题

这其中隐藏着一个令人头疼的陷阱——跨域污染。如果 DOM 中直接引用了外部 URL 作为图片来源，html2canvas 尝试将其绘制到 Canvas 时，浏览器的安全机制便会介入，直接给 Canvas 打上“Tainted”标签。其后果是，一旦调用 toDataURL 尝试导出图片，就会立即触发报错。

解决方案其实也很直接：在渲染海报之前，利用 fetch 主动将外部图片下载下来，再转换成纯 Base64 字符串。这样一来，所有数据都变成了本地资源，html2canvas 便不会再有任何抱怨。

async function getCoverBase64(coverUrl) {
  try {
    // 1. 追加随机时间戳，打破浏览器无 CORS 头的本地缓存限制
    const cacheBustedUrl = `${coverUrl}${coverUrl.includes('?') ? '&' : '?'}_t=${Date.now()}_${Math.random()}`;
    
    // 2. 携带 cors 模式主动发起 fetch 请求
    const response = await fetch(cacheBustedUrl, { mode: 'cors' });
    const blob = await response.blob();
    
    // 3. 使用 FileReader 将 Blob 转换为 Base64 字符串
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = () => resolve(reader.result);
    });
  } catch (error) {
    console.error('图片转 Base64 失败:', error);
    // 降级方案：回退到带随机戳的普通 URL
    return coverUrl; 
  }
}

步骤三：生成带有中心 Logo 的自定义二维码

纯粹的黑白方块二维码视觉效果较为单调，在海报中通常期望中心能放置一个业务 Logo。具体做法是先用 qrcode 生成基础 Canvas，再通过原生 Canvas API 将 Logo 绘制上去。

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.sa ve();
  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');
}

步骤四：一键渲染并触发本地下载

当所有数据转换完成、DOM 渲染就绪后，最后一步便是调用 html2canvas 进行截图操作。

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. 动态创建  标签触发浏览器本地下载
    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);
  }
}