hookehuyr

fix(SharePoster): 修复海报生成背景透明问题并移除图片压缩参数

移除图片压缩参数以避免CDN图片处理问题
将海报生成背景设置为透明以保留圆角效果
......@@ -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">
<div class="PosterInfo p-4 bg-white">
<div class="flex items-start">
<!-- 左侧二维码 -->
<div class="PosterQR mr-4">
......@@ -83,11 +83,11 @@ function normalize_image_url(src) {
const u = new URL(url, window.location.origin)
if (u.hostname === 'cdn.ipadbiz.cn') {
// CDN 图片统一追加压缩参数,若地址未包含 imageMogr2,则追加压缩参数
const param = 'imageMogr2/thumbnail/200x/strip/quality/70'
const has_mogr = url.includes('imageMogr2')
if (!has_mogr) {
return url + (url.includes('?') ? '&' : '?') + param
}
// 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) {
......@@ -304,10 +304,11 @@ 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: '#ffffff',
backgroundColor: 'transparent',
imagePlaceholder: placeholder,
fetchRequestInit: { mode: 'cors', cache: 'no-cache', credentials: 'omit' },
// 避免外层 margin 影响截图结果
......@@ -348,7 +349,7 @@ function create_offscreen_clone(node) {
overflow: 'hidden',
opacity: '0',
pointerEvents: 'none',
background: '#ffffff',
background: 'transparent',
zIndex: '-1000'
})
// 克隆节点样式校正,避免动画、阴影、滤镜干扰
......