Change default background

Change background image
换行
// ==UserScript==
// @name Change default background
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Change background image
// @author Jack
// @match https://sketchful.io/
// @grant none
// @run-at document-end
// @license MIT
// ==/UserScript==
 
const setBackground = () => {
  const uploadButton = `<div>
  <style>
    .custom-image-input {
      color: transparent;
      width: 150px;
    }
    .custom-image-input::-webkit-image-upload-button {
      visibility: hidden;
      position: fixed;
    }
    .custom-image-input::before {
      content: "Upload background";
      color: #fff;
      display: inline-block;
      background: #0047AB;
      border-radius: 3px;
      padding: 5px 8px;
      outline: none;
      white-space: nowrap;
      -webkit-user-select: none;
      cursor: pointer;
      font-weight: 700;
      font-size: 10pt;
      z-index: 10000;
      position: fixed;
    }
    .custom-image-input:hover::before {
      border-color: black;
    }
    .custom-image-input:active {
      outline: 0;
    }
    .custom-image-input:active::before {
      background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
    }
    .button {
      content: "Upload background";
      color: #fff;
      display: inline-block;
      background: #0047AB;
      border-radius: 3px;
      padding: 5px 8px;
      outline: none;
      white-space: nowrap;
      -webkit-user-select: none;
      cursor: pointer;
      font-weight: 700;
      font-size: 10pt;
      z-index: 10000;
      position: fixed;
      border: none;
    }
 
  </style>
   <input type="file" class="custom-image-input" id="upload-img" accept="image/png, image/jpeg">
   <button type="button" class="button" id="cancel">Default background</button>
  </div>`
  document.body.insertAdjacentHTML("afterend", uploadButton);
  const saveAndSetBG = async (e) => {
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onloadend = () => {
        const newBG = reader.result
       body.setAttribute('style', `background-image: url(${newBG}); background-size: 100vw; overflow: hidden;`);
       window.localStorage.setItem('bg', newBG)
    };
  };
  const defaultBG = () => {
      window.localStorage.removeItem('bg')
      const body = document.querySelector("html");
      body.setAttribute('style', 'background-image: url(https://sketchful.io/8519a42080077ff3e9a9.png);; background-color: #0b5dea; background-repeat: repeat; background-size: 256px; overflow: hidden;');
};
  const imgInput = document.querySelector("#upload-img");
  const cancel = document.querySelector("#cancel")
  cancel.addEventListener("click", defaultBG);
  imgInput.addEventListener("change", saveAndSetBG);
  const body = document.querySelector("html");
  window.localStorage.getItem('bg') && body.setAttribute('style', `background-image: url(${window.localStorage.getItem('bg')}); background-size: 100vw; overflow: hidden;`);
};
 
(function init() {
  setBackground();
})();
欢迎访问Greasy Fork镜像
