Vue 实战：纯前端生成带中心 Logo 二维码的分享海报
在日常的 Web 业务中，经常会遇到“点击分享，生成一张包含用户信息、业务数据以及专属二维码的海报图”的需求。为了节省服务端资源，我们通常会采用纯前端的方案来完成海报的绘制与下载。
本文将以一个实际的“视频/通知分享海报”组件为例，拆解基于 html2canvas 和 qrcode 的纯前端海报生成方案，并重点分享如何解决跨域图片导致 Canvas 被污染的经典踩坑经验。
核心技术栈
- Vue.js (搭建海报 DOM 结构)
- html2canvas (将 DOM 渲染为 Canvas 并导出图片)
- qrcode (生成高容错率的二维码)
步骤一：准备海报的 DOM 结构
首先，我们需要用 HTML 和 CSS 把海报的样式“画”出来。关键在于给需要截图的最外层容器加上一个特定的 ID（例如 poster-node），并在外部包裹一个全屏遮罩层。
<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>
步骤二：解决外部图片跨域污染 Canvas 的难题（重点）
如果在 DOM 中直接使用外部 URL 作为 <img src="...">，当 html2canvas 尝试将其画到 Canvas 上时，极易触发浏览器的安全机制，导致 Canvas 被污染（Tainted），从而在调用 toDataURL 导出图片时报错。
解决方案：在渲染海报前，主动用 fetch 将外部图片拉取下来，并转换为纯 Base64 字符串。
兼容问题：如果有些浏览器不支持fetch我们可以采用XMLHttpRequest。
将图片以 Blob 流下载下来，并通过 FileReader 转成纯文本的 Base64 。 对于 html2canvas 而言，Base64 就是一段本地文本数据，完美绕过了跨域限制，从根本上杜绝了画布污染。这样 html2canvas 渲染的就全是本地数据了。
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;
}
}
非 CORS 缓存导致的请求失败
问题描述 ：在进行转 Base64 的 XHR 请求时，如果这张图片在之前的页面已经被普通的 标签加载过，浏览器会把它缓存在本地（且不带 CORS 跨域头）。XHR 请求复用这个缓存时，会因为缺少 Access-Control-Allow-Origin 直接报跨域错误，导致转 Base64 失败。
解决方案 ： 在 XHR 请求前，强制在 URL 末尾拼接随机时间戳参数 _t=${Date.now()} ，骗过浏览器发起全新请求，从而确保拿到带有完整 CORS 头的图片数据。
步骤三：生成带有中心 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.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 进行最终的“截图”了。
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 图片）曾在页面中被直接加载过，被直接通过
<img>标签加载过，浏览器会建立一个 没有 CORS 响应头 的缓存。此时如果用fetch去拉取，会直接被 CORS 策略拦截。必须在 URL 后面加上?_t=xxx的时间戳来绕过缓存。 - 文本超出截断：海报尺寸是固定的，如果用户的业务标题过长，会撑破布局。在塞入 DOM 前，务必利用 CSS 的
-webkit-line-clamp或 JS 字符串截断做好限制。 - 兜底调整：预签名 URL 极易被破坏导致 403 如果你使用的是阿里云 OSS 或腾讯云 COS 等带有 Signature 签名的图片 URL， 切忌在兜底降级时依然拼接 _t 参数 ！对象存储的签名是严格基于原始 URL 计算的，强行追加未签名的参数会被判定为篡改，直接返回 403 Forbidden 。
- 兼容性问题：老旧浏览器的 crossorigin 致命 Bug 在部分老版本内核（如旧版 iOS Safari 或 Android WebView）中，如果
<img>加载的是 Base64（ data: URI），同时又被硬编码了 crossorigin="anonymous" ，浏览器会直接将其拦截导致图片裂开。 解法：动态绑定属性 。只有在转码失败降级为 http/https 链接时才加上 crossorigin 试图挽救画布；如果成功转为了 Base64，必须移除该属性。 - 二维码容错率：如果要在二维码中心叠加头像或 Logo，必须将
qrcode的errorCorrectionLevel属性设置为'H'(约 30% 容错率)，否则极易导致设备无法识别。
利用这套组合，我们能够以较低的成本，在纯前端环境下输出高颜值、不模糊、不跨域报错的业务分享海报。
