From 49a01a0950054aeb6dc6756cb010bcbf2ca5f763 Mon Sep 17 00:00:00 2001 From: kwaroran Date: Sun, 11 Jun 2023 11:04:11 +0900 Subject: [PATCH] [fix] image compression --- src/lang/cn.ts | 1 + src/lang/en.ts | 3 +- src/lang/ko.ts | 2 + src/lib/Setting/Pages/AdvancedSettings.svelte | 4 + src/ts/characterCards.ts | 9 +- src/ts/parser.ts | 104 +++++++++++++++++- src/ts/storage/database.ts | 4 + 7 files changed, 120 insertions(+), 7 deletions(-) diff --git a/src/lang/cn.ts b/src/lang/cn.ts index 1cf72cb1..46769e87 100644 --- a/src/lang/cn.ts +++ b/src/lang/cn.ts @@ -308,4 +308,5 @@ export const languageChinese = { recent: '最新', downloads: '下载量', trending: "热度", + imageCompression: "图像压缩" } \ No newline at end of file diff --git a/src/lang/en.ts b/src/lang/en.ts index 14a67f82..196d81fd 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -311,6 +311,7 @@ export const languageEnglish = { enterMessageForTranslateToEnglish: "Enter Message for Translate to English", recent: 'Recent', downloads: 'Downloads', - trending: "Trending" + trending: "Trending", + imageCompression: "Image Compression" } \ No newline at end of file diff --git a/src/lang/ko.ts b/src/lang/ko.ts index dd6aa543..a7c8d10e 100644 --- a/src/lang/ko.ts +++ b/src/lang/ko.ts @@ -281,4 +281,6 @@ export const languageKorean = { useChatCopy: "채팅 메시지 복사 사용", autoTranslateInput: "입력 자동 번역", enterMessageForTranslateToEnglish: "영어로 번역할 메시지를 입력해주세요", + imageCompression: "이미지 압축" + } \ No newline at end of file diff --git a/src/lib/Setting/Pages/AdvancedSettings.svelte b/src/lib/Setting/Pages/AdvancedSettings.svelte index 1c6fef69..33a9dbc0 100644 --- a/src/lib/Setting/Pages/AdvancedSettings.svelte +++ b/src/lib/Setting/Pages/AdvancedSettings.svelte @@ -53,6 +53,10 @@ {language.showUnrecommended} +
+ + {language.imageCompression} +
{language.useExperimental} diff --git a/src/ts/characterCards.ts b/src/ts/characterCards.ts index ef7603d6..f282e8d1 100644 --- a/src/ts/characterCards.ts +++ b/src/ts/characterCards.ts @@ -11,6 +11,7 @@ import { characterFormatUpdate } from "./characters" import { checkCharOrder, downloadFile, readImage, saveAsset } from "./storage/globalApi" import { cloneDeep } from "lodash" import { selectedCharID } from "./stores" +import { convertImage } from "./parser" export const hubURL = import.meta.env.DEV ? "http://127.0.0.1:8787" : "https://sv.risuai.xyz" @@ -532,7 +533,7 @@ export async function exportSpecV2(char:character) { msg: `Loading... (Adding Emotions ${i} / ${card.data.extensions.risuai.emotions.length})` }) const rData = await readImage(card.data.extensions.risuai.emotions[i][1]) - char.emotionImages[i][1] = Buffer.from(rData).toString('base64') + char.emotionImages[i][1] = Buffer.from(await convertImage(rData)).toString('base64') } } @@ -544,7 +545,7 @@ export async function exportSpecV2(char:character) { msg: `Loading... (Adding Additional Assets ${i} / ${card.data.extensions.risuai.additionalAssets.length})` }) const rData = await readImage(card.data.extensions.risuai.additionalAssets[i][1]) - char.additionalAssets[i][1] = Buffer.from(rData).toString('base64') + char.additionalAssets[i][1] = Buffer.from(await convertImage(rData)).toString('base64') } } @@ -611,7 +612,7 @@ export async function shareRisuHub(char:character, arg:{ }) const data = card.data.extensions.risuai.emotions[i][1] const rData = await readImage(data) - resources.push([data, Buffer.from(rData).toString('base64')]) + resources.push([data, Buffer.from(await convertImage(rData)).toString('base64')]) } } @@ -626,7 +627,7 @@ export async function shareRisuHub(char:character, arg:{ }) const data = card.data.extensions.risuai.additionalAssets[i][1] const rData = await readImage(data) - resources.push([data, Buffer.from(rData).toString('base64')]) + resources.push([data, Buffer.from(await convertImage(rData)).toString('base64')]) } } diff --git a/src/ts/parser.ts b/src/ts/parser.ts index 25ef1dd7..00f8a971 100644 --- a/src/ts/parser.ts +++ b/src/ts/parser.ts @@ -1,8 +1,9 @@ import DOMPurify from 'isomorphic-dompurify'; import showdown from 'showdown'; -import type { character, groupChat } from './storage/database'; +import { DataBase, type character, type groupChat } from './storage/database'; import { getFileSrc } from './storage/globalApi'; import { processScript } from './process/scripts'; +import { get } from 'svelte/store'; const convertor = new showdown.Converter({ simpleLineBreaks: true, @@ -65,4 +66,103 @@ export function parseMarkdownSafe(data:string) { export async function hasher(data:Uint8Array){ return Buffer.from(await crypto.subtle.digest("SHA-256", data)).toString('hex'); -} \ No newline at end of file +} + +export async function convertImage(data:Uint8Array) { + if(!get(DataBase).imageCompression){ + return data + } + const type = checkImageType(data) + if(type !== 'Unknown' && type !== 'WEBP' && type !== 'AVIF'){ + if(type === 'PNG' && isAPNG(data)){ + return data + } + + console.log('converting') + return await resizeAndConvert(data) + } + return data +} + +async function resizeAndConvert(imageData: Uint8Array): Promise { + return new Promise((resolve, reject) => { + const base64Image = 'data:image/png;base64,' + Buffer.from(imageData).toString('base64'); + const image = new Image(); + image.onload = () => { + URL.revokeObjectURL(base64Image); + + // Create a canvas + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + if (!context) { + throw new Error('Unable to get 2D context'); + } + + // Compute the new dimensions while maintaining aspect ratio + let { width, height } = image; + if (width > 3000 || height > 3000) { + const aspectRatio = width / height; + if (width > height) { + width = 3000; + height = Math.round(width / aspectRatio); + } else { + height = 3000; + width = Math.round(height * aspectRatio); + } + } + + // Resize and draw the image to the canvas + canvas.width = width; + canvas.height = height; + context.drawImage(image, 0, 0, width, height); + + // Try to convert to WebP + let base64 = canvas.toDataURL('image/webp', 90); + + // If WebP is not supported, convert to JPEG + if (base64.indexOf('data:image/webp') != 0) { + base64 = canvas.toDataURL('image/jpeg', 90); + } + + // Convert it to Uint8Array + const array = Buffer.from(base64.split(',')[1], 'base64'); + resolve(array); + }; + image.src = base64Image; + }); +} + +type ImageType = 'JPEG' | 'PNG' | 'GIF' | 'BMP' | 'AVIF' | 'WEBP' | 'Unknown'; + +function checkImageType(arr:Uint8Array):ImageType { + const isJPEG = arr[0] === 0xFF && arr[1] === 0xD8 && arr[arr.length-2] === 0xFF && arr[arr.length-1] === 0xD9; + const isPNG = arr[0] === 0x89 && arr[1] === 0x50 && arr[2] === 0x4E && arr[3] === 0x47 && arr[4] === 0x0D && arr[5] === 0x0A && arr[6] === 0x1A && arr[7] === 0x0A; + const isGIF = arr[0] === 0x47 && arr[1] === 0x49 && arr[2] === 0x46 && arr[3] === 0x38 && (arr[4] === 0x37 || arr[4] === 0x39) && arr[5] === 0x61; + const isBMP = arr[0] === 0x42 && arr[1] === 0x4D; + const isAVIF = arr[4] === 0x66 && arr[5] === 0x74 && arr[6] === 0x79 && arr[7] === 0x70 && arr[8] === 0x61 && arr[9] === 0x76 && arr[10] === 0x69 && arr[11] === 0x66; + const isWEBP = arr[0] === 0x52 && arr[1] === 0x49 && arr[2] === 0x46 && arr[3] === 0x46 && arr[8] === 0x57 && arr[9] === 0x45 && arr[10] === 0x42 && arr[11] === 0x50; + + if (isJPEG) return "JPEG"; + if (isPNG) return "PNG"; + if (isGIF) return "GIF"; + if (isBMP) return "BMP"; + if (isAVIF) return "AVIF"; + if (isWEBP) return "WEBP"; + return "Unknown"; +} + +function isAPNG(pngData: Uint8Array): boolean { + const pngSignature = [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A]; + const acTL = [0x61, 0x63, 0x54, 0x4C]; + + if (!pngData.slice(0, pngSignature.length).every((v, i) => v === pngSignature[i])) { + throw new Error('Invalid PNG data'); + } + + for (let i = pngSignature.length; i < pngData.length - 12; i += 4) { + if (pngData.slice(i + 4, i + 8).every((v, j) => v === acTL[j])) { + return true; + } + } + return false; +} \ No newline at end of file diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.ts index 4798decb..af82986e 100644 --- a/src/ts/storage/database.ts +++ b/src/ts/storage/database.ts @@ -257,6 +257,9 @@ export function setDatabase(data:Database){ if(checkNullish(data.autoSuggestPrompt)){ data.autoSuggestPrompt = defaultAutoSuggestPrompt } + if(checkNullish(data.imageCompression)){ + data.imageCompression = true + } changeLanguage(data.language) DataBase.set(data) @@ -505,6 +508,7 @@ export interface Database{ useChatCopy:boolean, novellistAPI:string, useAutoTranslateInput:boolean + imageCompression:boolean } interface hordeConfig{