Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d712fb98 1 parent 3f17fbf7

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

移除图片压缩参数以避免CDN图片处理问题
将海报生成背景设置为透明以保留圆角效果
Inline Side-by-side
Showing 1 changed file with 9 additions and 8 deletions
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
27 <img :src="cover_final_src" alt="课程封面" class="w-full h-auto object-contain" crossorigin="anonymous" /> 27 <img :src="cover_final_src" alt="课程封面" class="w-full h-auto object-contain" crossorigin="anonymous" />
28 </div> 28 </div>
29 <!-- 下部信息区：左二维码 + 右文案 --> 29 <!-- 下部信息区：左二维码 + 右文案 -->
30 - <div class="PosterInfo p-4"> 30 + <div class="PosterInfo p-4 bg-white">
31 <div class="flex items-start"> 31 <div class="flex items-start">
32 <!-- 左侧二维码 --> 32 <!-- 左侧二维码 -->
33 <div class="PosterQR mr-4"> 33 <div class="PosterQR mr-4">
...@@ -83,11 +83,11 @@ function normalize_image_url(src) { ...@@ -83,11 +83,11 @@ function normalize_image_url(src) {
83 const u = new URL(url, window.location.origin) 83 const u = new URL(url, window.location.origin)
84 if (u.hostname === 'cdn.ipadbiz.cn') { 84 if (u.hostname === 'cdn.ipadbiz.cn') {
85 // CDN 图片统一追加压缩参数，若地址未包含 imageMogr2，则追加压缩参数 85 // CDN 图片统一追加压缩参数，若地址未包含 imageMogr2，则追加压缩参数
86 - const param = 'imageMogr2/thumbnail/200x/strip/quality/70' 86 + // const param = 'imageMogr2/thumbnail/200x/strip/quality/70'
87 - const has_mogr = url.includes('imageMogr2') 87 + // const has_mogr = url.includes('imageMogr2')
88 - if (!has_mogr) { 88 + // if (!has_mogr) {
89 - return url + (url.includes('?') ? '&' : '?') + param 89 + // return url + (url.includes('?') ? '&' : '?') + param
90 - } 90 + // }
91 return url 91 return url
92 } 92 }
93 } catch (e) { 93 } catch (e) {
...@@ -304,10 +304,11 @@ async function compose_poster() { ...@@ -304,10 +304,11 @@ async function compose_poster() {
304 // 透明 1x1 PNG 作为占位图，避免资源获取失败直接中断 304 // 透明 1x1 PNG 作为占位图，避免资源获取失败直接中断
305 const placeholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Wm3T9kAAAAASUVORK5CYII=' 305 const placeholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Wm3T9kAAAAASUVORK5CYII='
306 // 生成 PNG dataURL 306 // 生成 PNG dataURL
307 + // 设置背景为透明，保留圆角的透明角，避免白色四角
307 const data_url = await toPng(clone, { 308 const data_url = await toPng(clone, {
308 pixelRatio: pixel_ratio, 309 pixelRatio: pixel_ratio,
309 cacheBust: true, 310 cacheBust: true,
310 - backgroundColor: '#ffffff', 311 + backgroundColor: 'transparent',
311 imagePlaceholder: placeholder, 312 imagePlaceholder: placeholder,
312 fetchRequestInit: { mode: 'cors', cache: 'no-cache', credentials: 'omit' }, 313 fetchRequestInit: { mode: 'cors', cache: 'no-cache', credentials: 'omit' },
313 // 避免外层 margin 影响截图结果 314 // 避免外层 margin 影响截图结果
...@@ -348,7 +349,7 @@ function create_offscreen_clone(node) { ...@@ -348,7 +349,7 @@ function create_offscreen_clone(node) {
348 overflow: 'hidden', 349 overflow: 'hidden',
349 opacity: '0', 350 opacity: '0',
350 pointerEvents: 'none', 351 pointerEvents: 'none',
351 - background: '#ffffff', 352 + background: 'transparent',
352 zIndex: '-1000' 353 zIndex: '-1000'
353 }) 354 })
354 // 克隆节点样式校正，避免动画、阴影、滤镜干扰 355 // 克隆节点样式校正，避免动画、阴影、滤镜干扰
......