Merge pull request #523 from 50h100a/card-resize-fix

Card resize fix

public/index.html

@@ -2203,6 +2203,9 @@
                                     <span class="note-link-span">?</span>
                                 </a>
                             </label>
+                            <label for="never_resize_avatars"><input id="never_resize_avatars" type="checkbox" />
+                                <span data-i18n="Never Resize Avatars">Never Resize Avatars</span>
+                            </label>
 
                             <div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="Reload Chat">
                                 Reload Chat

public/script.js

@@ -3651,6 +3651,9 @@ async function read_avatar_load(input) {
         $('#dialogue_popup').addClass('large_dialogue_popup wide_dialogue_popup');
 
         const croppedImage = await callPopup(getCropPopup(e.target.result), 'avatarToCrop');
+		if (!croppedImage) {
+			return;
+		}
 
         $("#avatar_load_preview").attr("src", croppedImage || e.target.result);
 
@@ -4943,8 +4946,8 @@ function callPopup(text, type, inputValue = '') {
     $("#dialogue_popup_cancel").css("display", "inline-block");
     switch (popup_type) {
         case "avatarToCrop":
-            $("#dialogue_popup_ok").text("Ok");
+            $("#dialogue_popup_ok").text("Accept");
-            $("#dialogue_popup_cancel").css("display", "none");
+            break;
         case "text":
         case "alternate_greeting":
         case "char_not_selected":
@@ -4990,6 +4993,7 @@ function callPopup(text, type, inputValue = '') {
             rotatable: false,
             crop: function (event) {
                 crop_data = event.detail;
+				crop_data.want_resize = !power_user.never_resize_avatars
             }
         });
     }
@@ -6147,7 +6151,10 @@ $(document).ready(function () {
         });
 
         $('#dialogue_popup').addClass('large_dialogue_popup wide_dialogue_popup');
-        await callPopup(getCropPopup(dataUrl.target.result), 'avatarToCrop');
+        const confirmation = await callPopup(getCropPopup(dataUrl.target.result), 'avatarToCrop');
+		if (!confirmation) {
+			return;
+		}
 
         let url = "/uploaduseravatar";
 

public/scripts/power-user.js

@@ -97,6 +97,7 @@ let power_user = {
     avatar_style: avatar_styles.ROUND,
     chat_display: chat_styles.DEFAULT,
     sheld_width: sheld_width.DEFAULT,
+	never_resize_avatars: false,
     play_message_sound: false,
     play_sound_unfocused: true,
     auto_save_msg_edits: false,
@@ -568,6 +569,7 @@ function loadPowerUserSettings(settings, data) {
     $("#multigen_next_chunks").val(power_user.multigen_next_chunks);
     $("#play_message_sound").prop("checked", power_user.play_message_sound);
     $("#play_sound_unfocused").prop("checked", power_user.play_sound_unfocused);
+    $("#never_resize_avatars").prop("checked", power_user.never_resize_avatars);
     $("#auto_save_msg_edits").prop("checked", power_user.auto_save_msg_edits);
     $("#allow_name1_display").prop("checked", power_user.allow_name1_display);
     $("#allow_name2_display").prop("checked", power_user.allow_name2_display);
@@ -1138,6 +1140,11 @@ $(document).ready(() => {
 
     $("#ui-preset-save-button").on('click', saveTheme);
 
+    $("#never_resize_avatars").on('input', function () {
+        power_user.never_resize_avatars = !!$(this).prop('checked');
+        saveSettingsDebounced();
+    });
+
     $("#play_message_sound").on('input', function () {
         power_user.play_message_sound = !!$(this).prop('checked');
         saveSettingsDebounced();

server.js

@@ -1033,13 +1033,19 @@ async function charaWrite(img_url, data, target_img, response = undefined, mes =
 async function tryReadImage(img_url, crop) {
     try {
         let rawImg = await jimp.read(img_url);
+		let final_width = rawImg.bitmap.width, final_height = rawImg.bitmap.height
 
         // Apply crop if defined
         if (typeof crop == 'object' && [crop.x, crop.y, crop.width, crop.height].every(x => typeof x === 'number')) {
             rawImg = rawImg.crop(crop.x, crop.y, crop.width, crop.height);
+			// Apply standard resize if requested
+			if (crop.want_resize) {
+				final_width = AVATAR_WIDTH
+				final_height = AVATAR_HEIGHT
+			}
         }
 
-        const image = await rawImg.cover(AVATAR_WIDTH, AVATAR_HEIGHT).getBufferAsync(jimp.MIME_PNG);
+		const image = await rawImg.cover(final_width, final_height).getBufferAsync(jimp.MIME_PNG);
         return image;
     }
     // If it's an unsupported type of image (APNG) - just read the file as buffer