☰

即梦AI左侧大图下载按钮

在即梦AI资产页添加“下载左侧大图”按钮，一键下载左侧大图（优先WebP）

// ==UserScript==
// @name         即梦AI左侧大图下载按钮
// @namespace    https://jimeng.jianying.com/
// @version      0.1.0
// @description  在即梦AI资产页添加“下载左侧大图”按钮，一键下载左侧大图（优先WebP）
// @author       Nick Liu
// @match        https://jimeng.jianying.com/ai-tool/*
// @icon         data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"/>

// @grant        GM_download
// @run-at       document-idle
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  // ========= 配置 =========
  const UI_POS = { top: '90px', right: '18px' }; // 按钮位置（固定定位）
  const SCAN_DEBOUNCE_MS = 600;                  // 变更后扫描的防抖时间
  const MIN_ABS_AREA = 60000;                   // 候选元素最小像素面积下限
  const MIN_VIEWPORT_AREA_RATIO = 0.04;         // 最小面积阈值占视窗比例
  // ========================

  let lastBest = null;   // { url, area, left, isWebp, w, h, tag }
  let scanTimer = null;

  function log(...args) {
    // console.debug('[即梦大图DL]', ...args);
  }

  function ensureButton() {
    let btn = document.getElementById('jm-left-big-image-download-btn');
    if (btn) return btn;

    btn = document.createElement('button');
    btn.id = 'jm-left-big-image-download-btn';
    btn.textContent = '下载左侧大图';
    btn.title = '下载页面左侧显示的大图（优先 WebP）';
    btn.style.cssText = `
      position: fixed;
      z-index: 2147483647;
      top: ${UI_POS.top};
      right: ${UI_POS.right};
      padding: 10px 14px;
      border-radius: 8px;
      background: #1f6feb;
      color: #fff;
      border: none;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(0,0,0,.15);
      opacity: .95;
    `;
    btn.addEventListener('mouseenter', () => (btn.style.opacity = '1'));
    btn.addEventListener('mouseleave', () => (btn.style.opacity = '.95'));
    btn.addEventListener('click', onDownloadClick);
    document.documentElement.appendChild(btn);

    const hint = document.createElement('div');
    hint.id = 'jm-left-big-image-download-hint';
    hint.style.cssText = `
      position: fixed;
      z-index: 2147483647;
      top: calc(${UI_POS.top} + 48px);
      right: ${UI_POS.right};
      padding: 6px 10px;
      border-radius: 6px;
      background: rgba(0,0,0,.67);
      color: #fff;
      font-size: 12px;
      display: none;
      max-width: 42vw;
      word-break: break-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    `;
    document.documentElement.appendChild(hint);

    return btn;
  }

  function setBtnState(found, textExtra) {
    const btn = ensureButton();
    const hint = document.getElementById('jm-left-big-image-download-hint');
    if (!found) {
      btn.disabled = true;
      btn.style.background = '#8b949e';
      btn.style.cursor = 'not-allowed';
      btn.textContent = '未找到左侧大图';
      hint.style.display = 'none';
    } else {
      btn.disabled = false;
      btn.style.background = '#1f6feb';
      btn.style.cursor = 'pointer';
      btn.textContent = '下载左侧大图';
      if (textExtra) {
        hint.textContent = textExtra;
        hint.style.display = 'block';
      } else {
        hint.style.display = 'none';
      }
    }
  }

  function isVisible(el, vpH) {
    const rect = el.getBoundingClientRect();
    if (rect.width < 20 || rect.height < 20) return false;
    if (rect.bottom <= 0 || rect.top >= vpH) return false;
    const cs = getComputedStyle(el);
    if (cs.display === 'none' || cs.visibility === 'hidden' || +cs.opacity === 0) return false;
    return true;
  }

  function absUrl(u) {
    try {
      return new URL(u, location.href).href;
    } catch (e) {
      return u;
    }
  }

  function extractUrlsFromBackgroundImage(bg) {
    const urls = [];
    const regex = /url\((?:\"|')?([^\"')]+)(?:\"|')?\)/g;
    let m;
    while ((m = regex.exec(bg))) {
      urls.push(m[1]);
    }
    return urls;
  }

  function getUrlFromEl(el) {
    if (el.tagName === 'IMG') {
      const u = el.currentSrc || el.src || '';
      return u ? absUrl(u) : '';
    }
    const cs = getComputedStyle(el);
    // 背景图、content中的 url(...)
    const bgs = (cs.backgroundImage || '') + ',' + (cs.content || '');
    const urls = extractUrlsFromBackgroundImage(bgs).filter(Boolean);
    return urls.length ? absUrl(urls[0]) : '';
  }

  function pickBestLeftBigImage() {
    const vpW = window.innerWidth || document.documentElement.clientWidth;
    const vpH = window.innerHeight || document.documentElement.clientHeight;
    const leftThreshold = vpW * 0.5;
    const minArea = Math.max(MIN_ABS_AREA, vpW * vpH * MIN_VIEWPORT_AREA_RATIO);

    const elems = new Set();
    // img
    document.querySelectorAll('img, picture img').forEach(e => elems.add(e));
    // 有背景图的元素（需要遍历并看计算样式）
    const all = document.querySelectorAll('*');
    for (let i = 0; i < all.length; i++) {
      const el = all[i];
      const cs = getComputedStyle(el);
      if ((cs.backgroundImage && cs.backgroundImage.includes('url(')) ||
          (cs.content && cs.content.includes('url('))) {
        elems.add(el);
      }
    }

    const candidates = [];
    elems.forEach(el => {
      if (!isVisible(el, vpH)) return;
      const rect = el.getBoundingClientRect();
      if (rect.left > leftThreshold) return; // 限定在视窗左半侧
      const area = rect.width * rect.height;
      if (area < minArea) return;

      const url = getUrlFromEl(el);
      if (!url || url.startsWith('data:')) return;

      const isWebp = /\.webp(\?|#|$)/i.test(url) || /[?&]format=\.?webp/i.test(url);
      candidates.push({ url, area, left: rect.left, isWebp, w: rect.width, h: rect.height, tag: el.tagName });
    });

    // 优先：webp > 面积大 > 越靠左
    candidates.sort((a, b) => {
      if (a.isWebp !== b.isWebp) return a.isWebp ? -1 : 1;
      if (b.area !== a.area) return b.area - a.area;
      if (a.left !== b.left) return a.left - b.left;
      return 0;
    });

    return candidates[0] || null;
  }

  function scheduleScan() {
    if (scanTimer) clearTimeout(scanTimer);
    scanTimer = setTimeout(scanAndUpdate, SCAN_DEBOUNCE_MS);
  }

  function scanAndUpdate() {
    scanTimer = null;
    const best = pickBestLeftBigImage();
    if (!best) {
      lastBest = null;
      setBtnState(false);
      return;
    }
    const changed = !lastBest || lastBest.url !== best.url;
    lastBest = best;
    const info = `${best.tag} ${Math.round(best.w)}×${Math.round(best.h)} ${best.isWebp ? 'webp' : ''}`.trim();
    setBtnState(true, `${info} | ${best.url}`);
    if (changed) log('found image:', best);
  }

  function filenameFromUrl(u) {
    try {
      const url = new URL(u);
      let base = decodeURIComponent(url.pathname.split('/').pop() || 'left-image').replace(/[?#].*$/, '');
      // 若无扩展名，按 query 中 format 或默认 webp
      if (!/\.(webp|jpg|jpeg|png|gif|bmp|svg|avif|heic)$/i.test(base)) {
        if (/[?&]format=\.?webp/i.test(u)) {
          base += '.webp';
        } else {
          base += '.webp';
        }
      }
      // 简单清洗
      base = base.replace(/[^\w.\-~]+/g, '_');
      return base;
    } catch (e) {
      return `left-image-${Date.now()}.webp`;
    }
  }

  function gmDownload(url, name) {
    return new Promise((resolve, reject) => {
      if (typeof GM_download !== 'function') {
        return reject(new Error('GM_download not available'));
      }
      try {
        GM_download({
          url,
          name,
          onload: () => resolve(),
          onerror: (err) => reject(err && err.error || err || new Error('GM_download error'))
        });
      } catch (e) {
        reject(e);
      }
    });
  }

  async function fallbackDownload(url, name) {
    // 尝试 fetch -> blob（可能受 CORS 限制）
    try {
      const resp = await fetch(url, { mode: 'cors', credentials: 'omit' });
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
      const blob = await resp.blob();
      const objUrl = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = objUrl;
      a.download = name;
      document.body.appendChild(a);
      a.click();
      a.remove();
      setTimeout(() => URL.revokeObjectURL(objUrl), 15000);
      return;
    } catch (e) {
      // 最后退：直接在新标签打开（用户可另存为）
      window.open(url, '_blank', 'noopener');
    }
  }

  async function onDownloadClick() {
    if (!lastBest || !lastBest.url) return;
    const url = lastBest.url;
    const name = filenameFromUrl(url);
    const btn = ensureButton();
    const prevText = btn.textContent;
    btn.textContent = '下载中...';
    btn.disabled = true;
    btn.style.background = '#8b949e';

    try {
      await gmDownload(url, name);
    } catch (e) {
      log('GM_download failed, fallback:', e);
      await fallbackDownload(url, name);
    } finally {
      btn.textContent = prevText;
      btn.disabled = false;
      btn.style.background = '#1f6feb';
    }
  }

  function initObservers() {
    const mo = new MutationObserver(() => scheduleScan());
    mo.observe(document.documentElement, {
      subtree: true,
      childList: true,
      attributes: true,
      attributeFilter: ['src', 'style', 'class']
    });
    window.addEventListener('resize', scheduleScan, { passive: true });
    window.addEventListener('scroll', scheduleScan, { passive: true });
  }

  // 启动
  ensureButton();
  initObservers();
  // 初次扫描（多次确保）
  scanAndUpdate();
  setTimeout(scanAndUpdate, 800);
  setTimeout(scanAndUpdate, 1800);
})();