您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
获取搞定设计画布所有素材
- // ==UserScript==
- // @name get-gaoding-material
- // @namespace get-gaoding-material
- // @version 1.0
- // @license MIT
- // @icon https://gd-filems.dancf.com/gaoding/gaoding/0/c012b037-b933-4364-96d0-c7ed4e1588984217369.png
- // @description 获取搞定设计画布所有素材
- // @author sertraline
- // @match https://www.gaoding.com/design*
- // @require https://cdn.staticfile.org/jquery/3.6.2/jquery.min.js
- // @grant GM_openInTab
- // @grant GM_download
- // ==/UserScript==
- const SOURCE_IMG_SELECTOR = '.design-editor img'
- const BTN_BOX_SELECTOR = `.editor-right-actions`
- const NAMESPACE = GM_info.script.namespace
- function uuid() {
- return Math.random().toString(36).substr(2)
- }
- function namespace(str) {
- return `${NAMESPACE}-${str}`
- }
- let toasts = [];
- let $toastContainer;
- const TOAST_CONTAINER_SELECTOR = `#${namespace("toast")}`;
- function initToast() {
- if (!$toastContainer) {
- $toastContainer = $(TOAST_CONTAINER_SELECTOR);
- if (!$toastContainer.length) {
- const toast = `
- <div id="${namespace("toast")}" class="${namespace("toast")}">
- </div>
- `;
- $toastContainer = $(toast);
- $("body").append($toastContainer);
- }
- }
- }
- function openToast(text, duration = 2000) {
- if (!text) return;
- initToast();
- const id = namespace(uuid + "toast")
- const toast = {
- id,
- element: $.parseHTML(`
- <div id="${id}" class="${namespace("toast__item")}">
- ${text}
- </div>
- `),
- };
- toasts.push(toast);
- $toastContainer.append(toast.element);
- setTimeout(() => {
- $(toast.element).remove();
- toasts = toasts.filter((t) => t.id !== toast.id);
- }, duration);
- }
- let btnBoxLoaded = false
- function createBtn(id, text, callback) {
- const element = document.querySelector(BTN_BOX_SELECTOR)
- if (!element) {
- const observer = new MutationObserver((mutationsList, observer) => {
- for (const mutation of mutationsList) {
- if (mutation.type === 'childList') {
- const element = document.querySelector(BTN_BOX_SELECTOR)
- if (element) {
- observer.disconnect()
- btnBoxLoaded = true
- createBtn(id, text, callback)
- }
- }
- }
- })
- observer.observe(document.body, {
- childList: true
- })
- return
- }
- const _id = namespace(id)
- if (document.getElementById(_id)) return
- const btn = `
- <div id="${_id}" class="${namespace('btns-item')}">${text}</div>
- `
- $(BTN_BOX_SELECTOR).append(btn)
- $(`#${_id}`).click(callback)
- }
- function createDrawer() {
- const drawer = `
- <div id="${namespace('drawer')}" class="${namespace('drawer')}">
- <div id="${namespace('drawer__mask')}" class="${namespace('drawer__mask')}"></div>
- <div id="${namespace('drawer__wrap')}" class="${namespace('drawer__wrap')}">
- <div id="${namespace('drawer__info')}" class="${namespace('drawer__info')}">
- </div>
- <div id="${namespace('drawer__content')}" class="${namespace('drawer__content')}">
- </div>
- </div>
- </div>
- `
- $('body').append(drawer)
- $(`#${namespace('drawer__mask')}`).click(function () {
- hideDrawer()
- })
- $(`#${namespace('drawer__content')}`).click(function (e) {
- const target = e.target
- if ($(target).hasClass(namespace('drawer__pic')) || $(target).parent().hasClass(namespace('drawer__pic'))) {
- const src = $(target).find('img').attr('src') || $(target).attr('src')
- if (src.indexOf('http') !== 0) {
- GM_openInTab(src, { active: true })
- return
- }
- downloadImg(src)
- }
- })
- hideDrawer()
- }
- function clearDrawer() {
- const _contentId = namespace('drawer__content')
- if (!$(`#${_contentId}`).length) return
- $(`#${_contentId}`).empty()
- }
- function hideDrawer() {
- const _drawerId = namespace('drawer')
- if (!$(`#${_drawerId}`).length) return
- $(`#${_drawerId}`).fadeOut()
- }
- function showDrawer() {
- const _drawerId = namespace('drawer')
- if (!$(`#${_drawerId}`).length) return
- $(`#${_drawerId}`).fadeIn()
- }
- function updateDrawerInfo() {
- const len = $(`#${namespace('drawer__content')}`).children().length
- $(`#${namespace('drawer__info')}`).text(`共${len}个素材`)
- }
- function pushImgItem(src) {
- const img = `
- <div class="${namespace('drawer__pic')}">
- <div class="${namespace('drawer__type')}">${getFileTypeFromUrl(src) || '未知'}</div>
- <img src="${src}">
- </div>
- `
- $(`#${namespace('drawer__content')}`).append(img)
- }
- function getNameFromUrl(url) {
- const SPLIT_REGEXP = /\/|\?/
- return new URL(url).pathname.split(SPLIT_REGEXP).pop()
- }
- function getFileTypeFromUrl(url) {
- const name = getNameFromUrl(url)
- const SPLIT_REGEXP = /\./
- const res = name.split(SPLIT_REGEXP)[1]
- return res ? res.toUpperCase() : null
- }
- function downloadImg(url) {
- const name = getNameFromUrl(url)
- GM_download({
- url,
- name,
- saveAs: true,
- onload: () => {
- openToast('下载成功')
- },
- onerror: () => {
- openToast('下载失败')
- }
- })
- }
- ; (function ($) {
- initStyles()
- createDrawer()
- createBtn(
- 'get-material',
- `<svg style="height: 20px;fill: #fff;marign-right: 5px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M362.667 256H832a42.667 42.667 0 0142.667 42.667V896A42.667 42.667 0 01832 938.667H362.667A42.667 42.667 0 01320 896V298.667A42.667 42.667 0 01362.667 256zm42.666 85.333v512h384v-512h-384zm256-170.666H234.667v554.666h-85.334V128A42.667 42.667 0 01192 85.333h469.333v85.334z"></path></svg>获取素材`,
- function () {
- const sourceImgEls = document.querySelectorAll(SOURCE_IMG_SELECTOR)
- if (!sourceImgEls.length) {
- openToast('请等待页面加载完成')
- return
- }
- clearDrawer()
- sourceImgEls.forEach(el => {
- pushImgItem(el.src)
- })
- updateDrawerInfo()
- showDrawer()
- openToast('素材获取成功')
- }
- )
- })(jQuery)
- function initStyles() {
- const styles = `
- <style>
- .${namespace('btns-item')} {
- margin-right: 10px;
- padding: 8px 16px;
- font-size: 14px;
- line-height: 24px;
- background: #2254f4;
- color: #fff;
- border-radius: 8px;
- cursor: pointer;
- display: flex;
- align-items: center;
- }
- .${namespace('drawer')}{
- position: fixed;
- bottom: 0;
- left: 0;
- z-index: 100000;
- }
- .${namespace('drawer__mask')}{
- position: fixed;
- top: 0;
- left: 0;
- z-index: 99998;
- background: rgba(0,0,0,0.5);
- width: 100vw;
- height: 100vh;
- }
- .${namespace('drawer__info')}{
- padding: 15px 20px;
- background: #fff;
- font-size: 14px;
- line-height: 20px;
- color: #333;
- border-bottom: 1px solid #eee;
- margin-bottom: 10px;
- }
- .${namespace('drawer__wrap')}{
- position: fixed;
- bottom: 0;
- left: 0;
- z-index: 99999;
- background: #fff;
- width: 300px;
- height: 100vh;
- }
- .${namespace('drawer__content')}{
- height: calc(100% - 60px);
- padding: 15px 20px;
- overflow-y: auto;
- }
- .${namespace('drawer__pic')}{
- width: 100%;
- height: 100px;
- background: #f1f2f4;
- margin-bottom: 10px;
- padding: 10px 5px;
- cursor: pointer;
- position: relative;
- border-radius: 8px;
- }
- .${namespace('drawer__type')}{
- position: absolute;
- bottom: 5px;
- right: 5px;
- background: #2254f4;
- color: #fff;
- padding: 2px 10px;
- font-size: 12px;
- line-height: 16px;
- }
- .${namespace('drawer__pic')} img{
- width: 100%;
- height: 100%;
- object-fit: contain;
- }
- .${namespace('toast')}{
- position: fixed;
- top: 50px;
- left: 50%;
- transform: translateX(-50%);
- display: flex;
- flex-direction: column;
- align-items: center;
- z-index: 99999999;
- }
- .${namespace('toast__item')}{
- padding: 10px 20px;
- background: rgba(0,0,0,0.5);
- color: #fff;
- border-radius: 5px;
- margin-bottom: 10px;
- }
- </style>
- `
- $('head').append(styles)
- }