mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize image loading by using canvas to convert fetched images to data URLs

Browse Source
This commit is contained in:
Kwaroran
2024-11-27 09:17:57 +09:00
parent 842258a0f5
commit eaf429a61f
1 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/ChatScreens/Chat.svelte
View File

@@ -345,12 +345,23 @@
if(url.startsWith('http://asset.localhost') || url.startsWith('https://asset.localhost') || url.startsWith('https://sv.risuai')){ if(url.startsWith('http://asset.localhost') || url.startsWith('https://asset.localhost') || url.startsWith('https://sv.risuai')){
try { try {
const data = await fetch(url) const data = await fetch(url)
img.setAttribute('src', `${await data.blob().then((b) => new Promise((resolve, reject) => { const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const img = new Image()
img.src = await data.blob().then((b) => new Promise((resolve, reject) => {
const reader = new FileReader() const reader = new FileReader()
reader.onload = () => resolve(reader.result as string) reader.onload = () => resolve(reader.result as string)
reader.onerror = reject reader.onerror = reject
reader.readAsDataURL(b) reader.readAsDataURL(b)
}))}`) }))
await new Promise((resolve) => {
img.onload = resolve
})
canvas.width = img.width
canvas.height = img.height
ctx.drawImage(img, 0, 0)
const dataURL = canvas.toDataURL('image/jpeg')
img.setAttribute('src', dataURL)
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
@@ -363,12 +374,22 @@
if(iconImage.startsWith('http://asset.localhost') || iconImage.startsWith('https://asset.localhost') || iconImage.startsWith('https://sv.risuai')){ if(iconImage.startsWith('http://asset.localhost') || iconImage.startsWith('https://asset.localhost') || iconImage.startsWith('https://sv.risuai')){
try { try {
const data = await fetch(iconImage) const data = await fetch(iconImage)
iconDataUrl = await data.blob().then((b) => new Promise((resolve, reject) => { const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const img = new Image()
img.src = await data.blob().then((b) => new Promise((resolve, reject) => {
const reader = new FileReader() const reader = new FileReader()
reader.onload = () => resolve(reader.result as string) reader.onload = () => resolve(reader.result as string)
reader.onerror = reject reader.onerror = reject
reader.readAsDataURL(b) reader.readAsDataURL(b)
})) }))
await new Promise((resolve) => {
img.onload = resolve
})
canvas.width = img.width
canvas.height = img.height
ctx.drawImage(img, 0, 0)
iconDataUrl = canvas.toDataURL('image/jpeg')
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }