fix(glass): load cross-origin wallpapers directly (#593)

src/@core/utils/__tests__/image.spec.ts

@@ -0,0 +1,53 @@
+import { vi } from 'vitest'
+
+vi.mock('colorthief', () => ({
+  default: class ColorThief {},
+}))
+
+import { preloadCorsImage } from '@/@core/utils/image'
+import { afterEach, describe, expect, it } from 'vitest'
+
+describe('preloadCorsImage', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('uses a CORS-clean cached response without reloading it', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      blob: vi.fn().mockResolvedValue(new Blob(['image'])),
+      ok: true,
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(preloadCorsImage('https://image.example/wallpaper.jpg')).resolves.toBe(true)
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    expect(fetchMock).toHaveBeenCalledWith(
+      new URL('https://image.example/wallpaper.jpg'),
+      expect.objectContaining({ cache: 'force-cache', credentials: 'omit', mode: 'cors' }),
+    )
+  })
+
+  it('reloads a response when an earlier non-CORS cache entry blocks the first request', async () => {
+    const fetchMock = vi
+      .fn()
+      .mockRejectedValueOnce(new TypeError('Failed to fetch'))
+      .mockResolvedValueOnce({
+        blob: vi.fn().mockResolvedValue(new Blob(['image'])),
+        ok: true,
+      })
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(preloadCorsImage('/wallpaper.jpg')).resolves.toBe(true)
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      2,
+      new URL('/wallpaper.jpg', window.location.href),
+      expect.objectContaining({ cache: 'reload', credentials: 'same-origin', mode: 'cors' }),
+    )
+  })
+
+  it('returns false when the source cannot be read with CORS', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new TypeError('Failed to fetch')))
+
+    await expect(preloadCorsImage('https://image.example/wallpaper.jpg')).resolves.toBe(false)
+  })
+})

src/@core/utils/image.ts

@@ -70,22 +70,57 @@ export async function getDominantColor(
 export async function preloadImage(url: string): Promise<boolean> {
   return new Promise(resolve => {
     const img = new Image()
+    let settled = false
+    const finish = (available: boolean) => {
+      if (settled) return
 
-    img.onload = () => resolve(true)
-    img.onerror = () => resolve(false)
+      settled = true
+      clearTimeout(timeout)
+      resolve(available)
+    }
+
+    img.onload = () => finish(true)
+    img.onerror = () => finish(false)
 
     // 设置超时，防止图片长时间加载
     const timeout = setTimeout(() => {
       img.src = ''
-      resolve(false)
+      finish(false)
     }, 5000) // 5秒超时
 
     img.src = url
 
     // 如果图片已经缓存，onload可能不会触发
     if (img.complete) {
-      clearTimeout(timeout)
-      resolve(true)
+      finish(img.naturalWidth > 0)
     }
   })
 }
+
+/** 在纹理加载前建立带 CORS 响应头的缓存，避免普通图片缓存污染 WebGL 读取。 */
+export async function preloadCorsImage(url: string): Promise<boolean> {
+  const request = async (cache: RequestCache) => {
+    const source = new URL(url, window.location.href)
+    const response = await fetch(source, {
+      cache,
+      credentials: source.origin === window.location.origin ? 'same-origin' : 'omit',
+      mode: 'cors',
+    })
+    if (!response.ok) return false
+
+    await response.blob()
+    return true
+  }
+
+  try {
+    if (await request('force-cache')) return true
+  } catch {
+    // 缓存中的非 CORS 响应可能使首次读取失败，重新验证后再决定是否回退。
+  }
+
+  try {
+    return await request('reload')
+  } catch {
+    return false
+  }
+}