MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-18 14:23:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

Automatically resize images to fit limits (#831)

Browse Source 
Resize images for Avatars, Worlds, Gallery, Icons and Emojis when uploading if it exceeds VRChats limits (2000 pixels in any dimension and 10MB file size).
This commit is contained in:
Nekromateion
2024-06-26 13:29:46 +02:00
committed by GitHub
parent 3ab1cf1d48
commit 873c1d38f0
4 changed files with 91 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
Dotnet/AppApi/AppApi.cs
View File

@@ -60,6 +60,65 @@ namespace VRCX
}
}
public string ResizeImageToFitLimits(string base64data)
{
return Convert.ToBase64String(ResizeImageToFitLimits(Convert.FromBase64String(base64data)));
}
public byte[] ResizeImageToFitLimits(byte[] imageData, int maxWidth = 2000, int maxHeight = 2000, long maxSize = 10_000_000)
{
using var fileMemoryStream = new MemoryStream(imageData);
System.Drawing.Bitmap image = new System.Drawing.Bitmap(fileMemoryStream);
if (image.Width > maxWidth)
{
var sizingFactor = image.Width / (double)maxWidth;
int newHeight = (int)Math.Round(image.Height / sizingFactor);
image = new System.Drawing.Bitmap(image, maxWidth, newHeight);
}
if (image.Height > maxHeight)
{
var sizingFactor = image.Height / (double)maxHeight;
int newWidth = (int)Math.Round(image.Width / sizingFactor);
image = new System.Drawing.Bitmap(image, newWidth, maxHeight);
}
void saveToFileToUpload()
{
using var imageSaveMemoryStream = new MemoryStream();
image.Save(imageSaveMemoryStream, System.Drawing.Imaging.ImageFormat.Png);
imageData = imageSaveMemoryStream.ToArray();
}
saveToFileToUpload();
for (int i = 0; i < 250 && imageData.Length > maxSize; i++)
{
saveToFileToUpload();
if (imageData.Length < maxSize)
break;
int newWidth = image.Width;
int newHeight = image.Height;
if (image.Width > image.Height)
{
newWidth = image.Width - 25;
newHeight = (int)Math.Round(image.Height / (image.Width / (double)newWidth));
}
else
{
newHeight = image.Height - 25;
newWidth = (int)Math.Round(image.Width / (image.Height / (double)newHeight));
}
image = new System.Drawing.Bitmap(image, newWidth, newHeight);
}
if (imageData.Length > maxSize)
{
throw new Exception("Failed to get image into target filesize.");
}
return imageData;
}
/// <summary>
/// Computes the signature of the file represented by the specified base64-encoded string using the librsync library.
/// </summary>

3
Dotnet/WebApi.cs
View File

@@ -217,7 +217,8 @@ namespace VRCX
}
}
var imageData = options["imageData"] as string;
byte[] fileToUpload = Convert.FromBase64CharArray(imageData.ToCharArray(), 0, imageData.Length);
byte[] fileToUpload = AppApi.Instance.ResizeImageToFitLimits(Convert.FromBase64String(imageData));
string fileFormKey = "file";
string fileName = "blob";
string fileMimeType = "image/png";

41
html/src/app.js
View File

@@ -21598,8 +21598,8 @@ speechSynthesis.getVoices();
if (!files.length) {
return;
}
if (files[0].size >= 10000000) {
// 10MB
if (files[0].size >= 100000000) {
// 100MB
$app.$message({
message: 'File size too large',
type: 'error'
@@ -21665,8 +21665,8 @@ speechSynthesis.getVoices();
if (!files.length) {
return;
}
if (files[0].size >= 10000000) {
// 10MB
if (files[0].size >= 100000000) {
// 100MB
$app.$message({
message: 'File size too large',
type: 'error'
@@ -21674,7 +21674,7 @@ speechSynthesis.getVoices();
this.clearInviteImageUpload();
return;
}
if (!files[0].type.match(/image.png/)) {
if (!files[0].type.match(/image.*/)) {
$app.$message({
message: "File isn't a png",
type: 'error'
@@ -22679,6 +22679,11 @@ speechSynthesis.getVoices();
return response;
};
$app.methods.resizeImageToFitLimits = async function (file) {
var response = await AppApi.ResizeImageToFitLimits(file);
return response;
};
$app.methods.genSig = async function (file) {
var response = await AppApi.SignFile(file);
return response;
@@ -22706,8 +22711,8 @@ speechSynthesis.getVoices();
clearFile();
return;
}
if (files[0].size >= 10000000) {
// 10MB
if (files[0].size >= 100000000) {
// 100MB
$app.$message({
message: 'File size too large',
type: 'error'
@@ -22715,7 +22720,7 @@ speechSynthesis.getVoices();
clearFile();
return;
}
if (!files[0].type.match(/image.png/)) {
if (!files[0].type.match(/image.*/)) {
$app.$message({
message: "File isn't a png",
type: 'error'
@@ -22727,7 +22732,8 @@ speechSynthesis.getVoices();
this.changeAvatarImageDialogLoading = true;
var r = new FileReader();
r.onload = async function (file) {
var base64File = btoa(r.result);
var base64File = await $app.resizeImageToFitLimits(btoa(r.result));
// 10MB
var fileMd5 = await $app.genMd5(base64File);
var fileSizeInBytes = parseInt(file.total, 10);
var base64SignatureFile = await $app.genSig(base64File);
@@ -23041,8 +23047,8 @@ speechSynthesis.getVoices();
clearFile();
return;
}
if (files[0].size >= 10000000) {
// 10MB
if (files[0].size >= 100000000) {
// 100MB
$app.$message({
message: 'File size too large',
type: 'error'
@@ -23050,7 +23056,7 @@ speechSynthesis.getVoices();
clearFile();
return;
}
if (!files[0].type.match(/image.png/)) {
if (!files[0].type.match(/image.*/)) {
$app.$message({
message: "File isn't a png",
type: 'error'
@@ -23062,7 +23068,8 @@ speechSynthesis.getVoices();
this.changeWorldImageDialogLoading = true;
var r = new FileReader();
r.onload = async function (file) {
var base64File = btoa(r.result);
var base64File = await $app.resizeImageToFitLimits(btoa(r.result));
// 10MB
var fileMd5 = await $app.genMd5(base64File);
var fileSizeInBytes = parseInt(file.total, 10);
var base64SignatureFile = await $app.genSig(base64File);
@@ -25073,8 +25080,8 @@ speechSynthesis.getVoices();
if (!files.length) {
return;
}
if (files[0].size >= 10000000) {
// 10MB
if (files[0].size >= 100000000) {
// 100MB
$app.$message({
message: 'File size too large',
type: 'error'
@@ -25184,8 +25191,8 @@ speechSynthesis.getVoices();
if (!files.length) {
return;
}
if (files[0].size >= 10000000) {
// 10MB
if (files[0].size >= 100000000) {
// 100MB
$app.$message({
message: 'File size too large',
type: 'error'

12
html/src/index.pug
View File

@@ -2428,7 +2428,7 @@ html
//- dialog: Change avatar image
el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="changeAvatarImageDialog" :visible.sync="changeAvatarImageDialogVisible" :title="$t('dialog.change_content_image.avatar')" width="850px")
div(v-if="changeAvatarImageDialogVisible" v-loading="changeAvatarImageDialogLoading")
input(type="file" accept="image/*" @change="onFileChangeAvatarImage" id="AvatarImageUploadButton" style="display:none")
input(type="file" accept="image/png,image/jpg,image/jpeg,image/webp,image/bmp,image/gif" @change="onFileChangeAvatarImage" id="AvatarImageUploadButton" style="display:none")
span {{ $t('dialog.change_content_image.description') }}
br
el-button-group(style="padding-bottom:10px;padding-top:10px")
@@ -2443,7 +2443,7 @@ html
//- dialog: Change world image
el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="changeWorldImageDialog" :visible.sync="changeWorldImageDialogVisible" :title="$t('dialog.change_content_image.world')" width="850px")
div(v-if="changeWorldImageDialogVisible" v-loading="changeWorldImageDialogLoading")
input(type="file" accept="image/*" @change="onFileChangeWorldImage" id="WorldImageUploadButton" style="display:none")
input(type="file" accept="image/png,image/jpg,image/jpeg,image/webp,image/bmp,image/gif" @change="onFileChangeWorldImage" id="WorldImageUploadButton" style="display:none")
span {{ $t('dialog.change_content_image.description') }}
br
el-button-group(style="padding-bottom:10px;padding-top:10px")
@@ -2472,7 +2472,7 @@ html
el-tab-pane(v-if="galleryDialogVisible" v-loading="galleryDialogGalleryLoading")
span(slot="label") {{ $t('dialog.gallery_icons.gallery') }}
span(style="color:#909399;font-size:12px;margin-left:5px") {{ galleryTable.length }}/64
input(type="file" accept="image/*" @change="onFileChangeGallery" id="GalleryUploadButton" style="display:none")
input(type="file" accept="image/png,image/jpg,image/jpeg,image/webp,image/bmp,image/gif" @change="onFileChangeGallery" id="GalleryUploadButton" style="display:none")
el-button-group
el-button(type="default" size="small" @click="refreshGalleryTable" icon="el-icon-refresh") {{ $t('dialog.gallery_icons.refresh') }}
el-button(type="default" size="small" @click="displayGalleryUpload" icon="el-icon-upload2" :disabled="!API.currentUser.$isVRCPlus") {{ $t('dialog.gallery_icons.upload') }}
@@ -2487,7 +2487,7 @@ html
el-tab-pane(v-if="galleryDialogVisible" v-loading="galleryDialogIconsLoading")
span(slot="label") {{ $t('dialog.gallery_icons.icons') }}
span(style="color:#909399;font-size:12px;margin-left:5px") {{ VRCPlusIconsTable.length }}/64
input(type="file" accept="image/*" @change="onFileChangeVRCPlusIcon" id="VRCPlusIconUploadButton" style="display:none")
input(type="file" accept="image/png,image/jpg,image/jpeg,image/webp,image/bmp,image/gif" @change="onFileChangeVRCPlusIcon" id="VRCPlusIconUploadButton" style="display:none")
el-button-group
el-button(type="default" size="small" @click="refreshVRCPlusIconsTable" icon="el-icon-refresh") {{ $t('dialog.gallery_icons.refresh') }}
el-button(type="default" size="small" @click="displayVRCPlusIconUpload" icon="el-icon-upload2" :disabled="!API.currentUser.$isVRCPlus") {{ $t('dialog.gallery_icons.upload') }}
@@ -2502,7 +2502,7 @@ html
el-tab-pane(v-if="galleryDialogVisible" v-loading="galleryDialogIconsLoading")
span(slot="label") {{ $t('dialog.gallery_icons.emojis') }}
span(style="color:#909399;font-size:12px;margin-left:5px") {{ emojiTable.length }}/9
input(type="file" accept="image/*" @change="onFileChangeEmoji" id="EmojiUploadButton" style="display:none")
input(type="file" accept="image/png,image/jpg,image/jpeg,image/webp,image/bmp,image/gif" @change="onFileChangeEmoji" id="EmojiUploadButton" style="display:none")
el-button-group(style="margin-right:10px")
el-button(type="default" size="small" @click="refreshEmojiTable" icon="el-icon-refresh") {{ $t('dialog.gallery_icons.refresh') }}
el-button(type="default" size="small" @click="displayEmojiUpload" icon="el-icon-upload2" :disabled="!API.currentUser.$isVRCPlus") {{ $t('dialog.gallery_icons.upload') }}
@@ -2977,7 +2977,7 @@ html
span(slot="label") {{ $t('dialog.gallery_select.gallery') }}
span(style="color:#909399;font-size:12px;margin-left:5px") {{ galleryTable.length }}/64
br
input(type="file" accept="image/*" @change="onFileChangeGallery" id="GalleryUploadButton" style="display:none")
input(type="file" accept="image/png,image/jpg,image/jpeg,image/webp,image/bmp,image/gif" @change="onFileChangeGallery" id="GalleryUploadButton" style="display:none")
el-button-group
el-button(type="default" size="small" @click="selectImageGallerySelect('', '')" icon="el-icon-close") {{ $t('dialog.gallery_select.none') }}
el-button(type="default" size="small" @click="refreshGalleryTable" icon="el-icon-refresh") {{ $t('dialog.gallery_select.refresh') }}