hookehuyr

fix(SharePoster): 修复海报生成时的背景透明问题和CDN图片压缩参数

- 将海报背景从透明改为白色,避免透明背景导致的显示问题
- 修复CDN图片压缩参数重复追加的问题并优化参数处理逻辑
- 重新启用生成中的提示文本
......@@ -14,7 +14,7 @@
</div>
<!-- 生成中提示 -->
<!-- <div v-if="is_generating" class="text-center text-gray-500 text-sm mb-2">正在生成海报...</div> -->
<div v-if="is_generating" class="text-center text-gray-500 text-sm mb-2">正在生成海报...</div>
<!-- 海报区域:直接使用 Canvas 合成的图片,支持长按保存 -->
<!-- 当已生成海报图时,容器不再应用卡片边框与阴影,避免双重边框视觉效果;降级展示仍保留卡片样式 -->
......@@ -27,7 +27,7 @@
<img :src="cover_final_src" alt="课程封面" class="w-full h-auto object-contain" crossorigin="anonymous" />
</div>
<!-- 下部信息区:左二维码 + 右文案 -->
<div class="PosterInfo p-4 bg-white">
<div class="PosterInfo p-4">
<div class="flex items-start">
<!-- 左侧二维码 -->
<div class="PosterQR mr-4">
......@@ -82,9 +82,13 @@ function normalize_image_url(src) {
try {
const u = new URL(url, window.location.origin)
if (u.hostname === 'cdn.ipadbiz.cn') {
if (u.hostname === 'cdn.ipadbiz.cn') {
return url + '?imageMogr2/thumbnail/400x/strip/quality/70'
}
// CDN 图片统一追加压缩参数,若地址未包含 imageMogr2,则追加压缩参数
const param = 'imageMogr2/thumbnail/200x/strip/quality/70'
const has_mogr = url.includes('imageMogr2')
if (!has_mogr) {
return url + (url.includes('?') ? '&' : '?') + param
}
return url
}
} catch (e) {
// 非绝对路径或无法解析的场景,直接返回原值
......@@ -300,11 +304,10 @@ async function compose_poster() {
// 透明 1x1 PNG 作为占位图,避免资源获取失败直接中断
const placeholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Wm3T9kAAAAASUVORK5CYII='
// 生成 PNG dataURL
// 设置背景为透明,保留圆角的透明角,避免白色四角
const data_url = await toPng(clone, {
pixelRatio: pixel_ratio,
cacheBust: true,
backgroundColor: 'transparent',
backgroundColor: '#ffffff',
imagePlaceholder: placeholder,
fetchRequestInit: { mode: 'cors', cache: 'no-cache', credentials: 'omit' },
// 避免外层 margin 影响截图结果
......@@ -345,7 +348,7 @@ function create_offscreen_clone(node) {
overflow: 'hidden',
opacity: '0',
pointerEvents: 'none',
background: 'transparent',
background: '#ffffff',
zIndex: '-1000'
})
// 克隆节点样式校正,避免动画、阴影、滤镜干扰
......