纯前端生成海报下载方案

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

总结与踩坑记录

完成上述流程后，这里总结几点经验，帮助避免重复踩坑。

1. 缓存击穿是刚需：外部图片（例如阿里云 OSS 图片）如果在页面中被直接加载过，浏览器会缓存无 CORS 头的版本。之后使用 fetch 拉取时，会被 CORS 策略拦截。解决方案是在 URL 后追加 _t=xxx 时间戳，强制绕过缓存。
2. 文本超出截断：海报尺寸固定，业务标题过长会撑破布局。在塞入 DOM 之前，使用 CSS 的 -webkit-line-clamp 或 JS 进行字符串截断，提前规避风险。
3. 二维码容错率：如果二维码中心需要叠加头像或 Logo，务必将 qrcode 的 errorCorrectionLevel 设置为 'H'（约 30% 容错），否则扫码设备可能无法识别。

使用这套组合方案，纯前端即可低成本输出视觉效果良好、不模糊、不跨域报错的分享海报。关键在于提前将所有数据转换为本地资源，后续流程就会顺畅许多。