☰

Avatar Builder+

Adds a upload image input to the avatar builder.

安装此脚本？
作者推荐脚本

您可能也喜欢Search Bar on Palettes Panel。

安装此脚本 
  1. // ==UserScript==
  2. // @name         Avatar Builder+
  3. // @namespace    Vholran.AvatarBuilder+
  4. // @version      2.4.Final
  5. // @description  Adds a upload image input to the avatar builder.
  6. // @author       Vholran (https://greasyfork.org/en/users/841616)
  7. // @match        https://*.drawaria.online/avatar/builder/
  8. // @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  9. // @icon         https://www.google.com/s2/favicons?domain=drawaria.online
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (($, undefined) => {
  14.     $(() => {
  15.  
  16.         const avatar = () => {
  17.             $('header').append('<label class="Button" for="imageInput">Upload Image</label><input style="display:none" id="imageInput" type="file" accept="image/jpeg, image/png, image/webp, image/gif">');
  18.             $('body').on('change', '#imageInput', (event) => {
  19.                 const $imageInput = $(event.target);
  20.                 const $labelButton = $('label.Button');
  21.                 const reader = new FileReader();
  22.                 reader.addEventListener('load', () => {
  23.                     const uploadedImage = reader.result.replace(/^data:[^;]+;/, 'data:image/jpeg;');
  24.                     $labelButton.text('Uploading...').css('pointer-events', 'none');
  25.                     $.ajax({
  26.                         url: window.LOGGEDIN ? '/saveavatar' : '/uploadavatarimage',
  27.                         type: 'POST',
  28.                         data: { 'avatarsave_builder': JSON.stringify(window.ACCOUNT_AVATARSAVE), 'imagedata': uploadedImage, 'fromeditor': true },
  29.                         xhr: () => {
  30.                             const xhr = new window.XMLHttpRequest();
  31.                             xhr.upload.addEventListener('progress', evt => {
  32.                                 if (evt.lengthComputable) {
  33.                                     const percentComplete = (evt.loaded / evt.total) * 100;
  34.                                     $labelButton.css('background', `linear-gradient(180deg, #f6f9fc 85%, transparent 15%), linear-gradient(90deg, #3ad73d ${percentComplete.toFixed(0)}%, #808386 0%`);
  35.                                 }
  36.                             }, false);
  37.                             return xhr;
  38.                         }
  39.                     }).done(data => {
  40.                         $labelButton.text('Saving...').removeAttr('style').css('pointer-events', 'none');
  41.                         fetch(location.origin + `/avatar/cache/${data}.jpg`, { method: 'GET', mode: 'cors', cache: 'reload' }).then(() => {
  42.                             $labelButton.text('Save OK!');
  43.                             location.href = new URL(location.href).origin;
  44.                         });
  45.                     }).fail((_jqXHR, _textStatus, errorThrown) => {
  46.                         $labelButton.text('Upload Image').removeAttr('style');
  47.                         $imageInput.val('');
  48.                         alert(errorThrown);
  49.                     });
  50.                 });
  51.                 reader.readAsDataURL($imageInput[0].files[0]);
  52.             });
  53.         };
  54.  
  55.        const mainObserver = new MutationObserver(() => {
  56.             if ($('main').length) {
  57.                 avatar();
  58.                 mainObserver.disconnect();
  59.             }
  60.         });
  61.  
  62.         mainObserver.observe(document, { childList: true, subtree: true });
  63.     });
  64. })(window.jQuery.noConflict(true));