纯前端生成海报下载方案

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

在日常的 Web 业务中，经常会遇到"点击分享，生成一张包含用户信息、业务数据以及专属二维码的海报图"的需求。为了节省服务端资源，我们通常会采用纯前端的方案来完成海报的绘制与下载。

本文将以一个实际的"视频/通知分享海报"组件为例，拆解基于 html2canvas 和 qrcode 的纯前端海报生成方案，并重点分享如何解决跨域图片导致 Canvas 被污染的经典踩坑经验。

核心技术栈

Vue.js (搭建海报 DOM 结构)
html2canvas (将 DOM 渲染为 Canvas 并导出图片)
qrcode (生成高容错率的二维码)

步骤一：准备海报的 DOM 结构

首先，我们需要用 HTML 和 CSS 把海报的样式"画"出来。关键在于给需要截图的最外层容器加上一个特定的 ID（例如 poster-node），并在外部包裹一个全屏遮罩层。

html 复制代码

<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. 外部视频封面图 -->
          <img class="video-cover" :src="coverBase64" crossorigin="anonymous" />
          
          <!-- 4. 底部带 Logo 的二维码 -->
          <img class="qr-code" :src="qrCodeUrl" />
        </div>
      </div>
      
    </div>
  </div>
</template>

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

如果在 DOM 中直接使用外部 URL 作为 <img src="...">，当 html2canvas 尝试将其画到 Canvas 上时，极易触发浏览器的安全机制，导致 Canvas 被污染（Tainted），从而在调用 toDataURL 导出图片时报错。

解决方案：在渲染海报前，主动用 fetch 将外部图片拉取下来，并转换为纯 Base64 字符串。 这样 html2canvas 渲染的就全是本地数据了。

javascript 复制代码

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。

javascript 复制代码

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');
}

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

当所需的数据（图片 Base64、二维码 Base64）都准备好并渲染到 DOM 后，就可以调用 html2canvas 进行最终的"截图"了。

javascript 复制代码

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);
  }
}

总结与踩坑记录

缓存击穿是刚需 ：如果外部图片（如阿里云 OSS 图片）曾在页面中被直接加载过，浏览器会建立没有 CORS 响应头的缓存。此时如果用 fetch 去拉取，会直接被 CORS 策略拦截。必须在 URL 后面加上 ?_t=xxx 的时间戳来绕过缓存。
文本超出截断 ：海报尺寸是固定的，如果用户的业务标题过长，会撑破布局。在塞入 DOM 前，务必利用 CSS 的 -webkit-line-clamp 或 JS 字符串截断做好限制。
二维码容错率 ：如果要在二维码中心叠加头像或 Logo，必须将 qrcode 的 errorCorrectionLevel 属性设置为 'H' (约 30% 容错率)，否则极易导致设备无法识别。

利用这套组合拳，我们能够以较低的成本，在纯前端环境下输出高颜值、不模糊、不跨域报错的业务分享海报。