随机图片生成

!!!
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /*body {
            padding: 40px 20px;
            background: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        } */
        .btn-wrap{
            display:flex;
            gap:14px;
            flex-wrap:wrap;
            justify-content:center;
        }
        .api-btn {
            padding: 10px 28px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            background-color: transparent;
            border: 1px solid rgba(255,255,255,0.3);
            color: #ffffff;
            border-radius: 6px;
        }
        .api-btn:hover {
            background-color: #3a3a3a;
        }
        .tip-text{
            font-size:14px;
            color:#b3b3b3;
            text-align:center;
        }
        .image-box {
            height: 450px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            width:100%;
            background-color: transparent;
            border-radius: 12px;
        }
        .image-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            cursor: pointer;
        }
        #showImg {
            display: none;
        }

/* ==========大图预览弹窗========== */
        .preview-mask{
            position: fixed;
            top:0;
            left:0;
            width:100vw;
            height:100vh;
            background:rgba(0,0,0,0.92);
            z-index:9999;
            display:none;
            overflow:hidden;
        }
        .preview-wrap{
            width:100%;
            height:100%;
            position:relative;
        }
        .preview-img{
            position:absolute;
            top:50%;
            left:50%;
            transform-origin: center center;
            pointer-events:auto;
            cursor: grab;
            user-select: none;
            will-change: transform;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            opacity:0;
        }
        .preview-img.no-transition{
            transition: none !important;
        }
        .preview-img.with-transition{
            transition: transform 0.12s ease-out;
        }
        .preview-img:active{
            cursor: grabbing;
        }
        .preview-close{
            position:absolute;
            top:16px;
            right:24px;
            color:#ffffff;
            font-size:36px;
            cursor:pointer;
            z-index:10000;
            user-select:none;
        }
        .zoom-percent{
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            color:#fff;
            background:rgba(0,0,0,0.65);
            padding:8px 16px;
            border-radius:8px;
            font-size:18px;
            z-index:10000;
            user-select:none;
            opacity:0;
            transition: opacity 0.3s ease;
            pointer-events:none;
        }
        .zoom-percent.show{
            opacity:1;
        }

/* 底部控制按钮栏 */
        .preview-bottom-bar{
            position:absolute;
            bottom:40px;
            left:50%;
            transform: translateX(-50%);
            display:flex;
            gap:12px;
            z-index:10000;
        }
        .preview-bottom-bar button{
            background:rgba(45,45,45,0.92);
            border:1px solid rgba(80,80,80,0.9);
            color:#ffffff;
            width:44px;
            height:44px;
            border-radius:8px;
            cursor:pointer;
            backdrop-filter: blur(4px);
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .preview-bottom-bar button:hover{
            background:rgba(60,60,60,0.95);
        }
        .preview-bottom-bar button svg{
            width:24px;
            height:24px;
            fill:#fff;
        }
    </style>
</head>
<body>
<div class="btn-wrap" id="btnContainer"></div>

<div class="preview-bottom-bar">
            
            <button id="btnRotateLeft">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M90.577455 604.997818L0 473.413818l52.829091-1.954909C72.704 233.378909 271.266909 46.545455 514.141091 46.545455 770.327273 46.545455 977.454545 254.696727 977.454545 512c0 257.349818-207.127273 465.454545-463.313454 465.454545a460.008727 460.008727 0 0 1-229.469091-61.114181 462.708364 462.708364 0 0 1-168.866909-167.610182l54.877091-32.535273 0.698182-0.698182h1.908363a395.310545 395.310545 0 0 0 340.852364 195.490909c219.089455 0 397.125818-178.874182 397.125818-398.987636 0-220.066909-178.036364-398.941091-397.125818-398.941091-204.520727 0-372.596364 155.554909-394.426182 355.048727l48.174546-2.001454-77.312 138.891636z m-39.191273-72.238545h2.141091l-2.141091-2.141091v2.141091z"></path>
<path d="M278.202182 545.326545V345.832727h198.562909v332.474182H278.202182v-66.513454h132.375273v-66.46691H278.202182z m66.187636-66.466909h66.187637v-66.56H344.389818v66.56zM542.952727 678.306909V345.832727h198.516364v332.474182h-198.516364z m66.141091-66.466909h66.234182V412.346182h-66.234182v199.493818z"></path>
</svg>
            </button>
            
            <button id="btnFlipH">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M73.023354 107.017051c6.141414 0 12.289293 0 12.289292 6.141414l264.277334 129.065373c12.293172 6.146586 18.439758 18.439758 18.439757 24.586344l-0.001293 503.969616c0 12.293172-6.146586 24.581172-18.439757 24.581172L85.311354 942.864808c-12.288 6.146586-18.434586 6.146586-30.727758-0.001293-12.293172-6.146586-12.293172-18.439758-12.293172-24.586343V137.743515c0-12.293172 6.146586-18.439758 12.293172-24.586343 6.147879-6.140121 12.294465-6.140121 18.439758-6.140121z m233.545697 178.231595L103.751111 186.909737v682.201212l202.81794-110.624323v-473.23798zM951.89204 107.017051c6.146586 0 12.293172 0 18.439758 6.141414 6.146586 6.146586 12.293172 18.439758 12.293172 24.586343v780.53495c0 12.293172-6.146586 18.439758-12.293172 24.586343-12.293172 6.146586-18.439758 6.146586-30.726465 0L675.326707 795.359677c-12.293172-6.141414-18.439758-18.434586-18.439758-24.581172V266.808889c0-12.293172 6.146586-24.586343 18.439758-24.586344L939.605333 113.157172c6.145293-6.140121 6.145293-6.140121 12.286707-6.140121z m-30.726464 762.095191V186.909737l-202.816647 98.338909v467.092687l202.816647 116.770909zM515.528404 76.284121c18.439758 0 30.732929 12.293172 30.732929 30.73293v811.262707c0 18.439758-12.293172 30.732929-30.732929 30.732929-18.434586 0-30.727758-12.293172-30.727758-30.732929l0.001293-811.262707c0.001293-18.439758 12.294465-30.732929 30.726465-30.73293z"></path>
</svg>
            </button>
            
            <button id="btnPlus">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"></path>
<path d="M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z"></path>
</svg>
            </button>
            
            <button id="btnToggleMode">
<svg id="iconOneToOne" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M316 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8zM512 622c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39zM512 482c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39z"></path>
<path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path>
<path d="M648 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8z"></path>
</svg>
<svg id="iconFitScreen" style="display:none;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M113.066667 73.130667h797.930666a39.893333 39.893333 0 0 1 39.893334 39.893333V910.933333a39.893333 39.893333 0 0 1-39.893334 39.893334H113.066667a39.893333 39.893333 0 0 1-39.893334-39.893334V113.024a39.893333 39.893333 0 0 1 39.893334-39.893333zm19.946666 817.813333h757.973334V133.013333H133.013333v757.930667z"></path>
<path d="M814.165333 379.264V209.706667l-54.4 0.064-117.866666 0.170666a26.026667 26.026667 0 0 0-19.242667 8.746667c-5.077333 5.546667-7.936 13.141333-7.936 21.034667s2.858667 15.402667 7.936 21.034667c5.12 5.632 12.032 8.746667 19.242667 8.746666l117.866666-0.170666v109.696c0 7.936 2.816 15.530667 7.893334 21.077333s12.032 8.746667 19.2 8.746666c7.210667 0 14.122667-3.072 19.242666-8.746666s7.936-13.141333 7.936-21.034667zM814.165333 644.8v169.557333l-54.4-0.064-117.866666-0.170666a26.026667 26.026667 0 0 1-19.242667-8.746667 31.402667 31.402667 0 0 1-7.936-21.034667c0-7.936 2.858667-15.402667 7.936-21.034667 5.12-5.632 12.032-8.746667 19.242667-8.746666l117.866666 0.170666v-109.696c0-7.936 2.816-15.530667 7.893334-21.077333s12.032-8.746667 19.2-8.746666c7.210667 0 14.122667 3.072 19.242666 8.746666s7.936 13.141333 7.936 21.034667zM209.962667 644.8v169.557333l54.4-0.064 117.866666-0.170666c7.210667 0 14.122667-3.136 19.242667-8.746667s7.936-13.141333 7.936-21.034667-2.858667-15.402667-7.936-21.034667c-5.12-5.632-12.032-8.746667-19.242667-8.746666l-117.866666 0.170666v-109.696c0-7.936-2.816-15.530667-7.893334-21.077333s-12.032-8.746667-19.2-8.746666c-7.210667 0-14.122667 3.072-19.242666 8.746666s-7.936 13.141333-7.936 21.034667zM210.005333 379.264V209.706667l54.4 0.064 117.888 0.170666c7.210667 0 14.122667 3.136 19.242667 8.746667s7.936 13.141333 7.936 21.034667-2.858667 15.402667-7.936 21.034667c-5.12 5.632-12.032 8.746667-19.242667 8.746666l-117.888-0.170666v109.696c0 7.936-2.816 15.530667-7.893333 21.077333s-12.032 8.746667-19.2 8.746666c-7.210667 0-14.122667-3.072-19.242667-8.746666s-7.936-13.141333-7.936-21.034667z"></path>
</svg>
            </button>
            
            <button id="btnMinus">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"></path>
<path d="M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z"></path>
</svg>
            </button>
            
            <button id="btnFlipV">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M106.368 951.544242c0-6.141414 0-12.289293 6.141414-12.289293l129.065374-264.277333c6.146586-12.293172 18.439758-18.439758 24.586343-18.439757l503.969616 0.001293c12.293172 0 24.581172 6.146586 24.581172 18.439757l147.505132 264.277333c6.146586 12.288 6.146586 18.434586 0 30.727758s-18.439758 12.293172-24.586344 12.293172H137.095758c-12.293172 0-18.439758-6.146586-24.586344-12.293172-6.141414-6.146586-6.141414-12.293172-6.141414-18.439758z m178.232889-233.545697L186.26198 920.816485h682.201212L757.837576 717.998545H284.600889zM106.368 72.675556c0-6.146586 0-12.293172 6.141414-18.439758 6.146586-6.146586 18.439758-12.293172 24.586344-12.293172H917.630707c12.293172 0 18.439758 6.146586 24.586344 12.293172 6.146586 12.293172 6.146586 18.439758 0 30.726465L794.711919 349.240889c-6.141414 12.293172-18.434586 18.439758-24.581172 18.439757H266.161131c-12.293172 0-24.586343-6.146586-24.586343-18.439757L112.509414 84.962263c-6.141414-6.145293-6.141414-6.145293-6.141414-12.286707z m762.096485 30.726464H186.26198l98.338909 202.81794h467.091394l116.772202-202.81794zM75.636364 509.039192c0-18.439758 12.293172-30.732929 30.732929-30.732929h811.261414c18.439758 0 30.732929 12.293172 30.732929 30.732929 0 18.434586-12.293172 30.727758-30.732929 30.727757l-811.261414-0.001292c-18.439758 0-30.732929-12.293172-30.732929-30.726465z"></path>
</svg>
            </button>
            
            <button id="btnRotateRight">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M288 352v192h128v64h-128v64h192v-320h-192z m128 128h-64v-64h64v64z m128-128v320h192v-320h-192z m128 256h-64v-192h64v192z m285.44-76.16h1.322667v-1.92l-1.322667 1.92z"></path>
<path d="M994.56 474.88l-35.84 55.04-1.28 1.92-35.84 55.04-60.16-119.04 32 1.92C872.32 277.76 709.76 128 512 128c-211.84 0-384 172.16-384 384s172.16 384 384 384a382.592 382.592 0 0 0 329.6-188.16h1.834667l0.725333 0.725333 53.077333 31.274667A446.378667 446.378667 0 0 1 512 960C264.32 960 64 759.68 64 512S264.32 64 512 64c234.88 0 426.88 179.84 446.08 408.96l36.48 1.92z"></path>
</svg>
            </button>
        </div>
    </div>
</div>

<div class="tip-text">♥♥♥不可以涩涩哟♥♥♥<br>PC：右键 - 另存为 - 可保存图片<br>手机：长按 - 可保存图片</div>
<script>
    // ===================== 配置区域 =====================
    const apiList = [
        { label:"真人-竖图", url:"https://imgapi.cn/api.php?zd=mobile&fl=meizi&gs=images" },
        { label:"真人-横图", url:"https://imgapi.cn/api.php?zd=pc&fl=meizi&gs=images" },
        { label:"动漫-竖图", url:"https://imgapi.cn/api.php?zd=mobile&fl=dongman&gs=images" },
        { label:"动漫-横图", url:"https://imgapi.cn/api.php?zd=pc&fl=dongman&gs=images" },
        { label:"风景-竖图", url:"https://imgapi.cn/api.php?zd=mobile&fl=fengjing&gs=images" },
        { label:"风景-横图", url:"https://imgapi.cn/api.php?zd=pc&fl=fengjing&gs=images" },
        { label:"随机-竖图", url:"https://imgapi.cn/api.php?zd=mobile&fl=suiji&gs=images" },
        { label:"随机-横图", url:"https://imgapi.cn/api.php?zd=pc&fl=suiji&gs=images" },
        { label:"Cos-随机", url:"https://imgapi.cn/cos.php?return=img" },
        { label:"Cos2-随机", url:"https://imgapi.cn/cos2.php?return=img" },
        // { label:"Cos3-随机", url:"https://pic.sld.tw/pic" },
        
        // { label:"18🈲🔞", url:"https://api.opics.org/9kg3"}
    ];
    const defaultLoadIndex = null;

// 缩放区间
    const MIN_SCALE = 0.2;
    const MAX_SCALE = 64.0;
    const SCALE_1X = 1.0;
    const SNAP_LOW = 0.93;
    const SNAP_HIGH = 1.07;
    const SCALE_EQUAL_THRESHOLD = 0.001;
    // ====================================================

const loadingUrl = 'https://imgapi.cn/loading.php';
    const showImg = document.getElementById('showImg');
    const btnContainer = document.getElementById('btnContainer');
    const previewMask = document.getElementById('previewMask');
    const previewWrap = document.getElementById('previewWrap');
    const previewImg = document.getElementById('previewImg');
    const previewClose = document.getElementById('previewClose');
    const zoomPercent = document.getElementById('zoomPercent');

//控制按钮
    const btnPlus = document.getElementById('btnPlus');
    const btnMinus = document.getElementById('btnMinus');
    const btnToggleMode = document.getElementById('btnToggleMode');
    const iconOneToOne = document.getElementById('iconOneToOne');
    const iconFitScreen = document.getElementById('iconFitScreen');
    const btnRotateLeft = document.getElementById('btnRotateLeft');
    const btnRotateRight = document.getElementById('btnRotateRight');
    const btnFlipH = document.getElementById('btnFlipH');
    const btnFlipV = document.getElementById('btnFlipV');

let currentRawImageUrl = '';
    let lastRequestToken = 0;
    let isLoading = false; // 新增：加载锁防抖
    let scale = 1;
    let offsetX = 0;
    let offsetY = 0;
    //旋转、镜像状态
    let rotateDeg = 0;
    let flipH = false;
    let flipV = false;

//拖拽变量
    let isDrag = false;
    let startX, startY;
    let mouseDownTime = 0;
    const CLICK_THRESHOLD = 0;
    //触摸
    let touchStartDistance = 0;
    let touchStartScale = 1;
    let touchStartX = 0, touchStartY = 0;
    let touchOffsetStartX = 0, touchOffsetStartY = 0;
    let hideTimer = null;

/**档位凑整 300~1000区间 */
    function snapForRange(s){
        if(s >=3.0 && s <10.0){
            return Math.round(s * 10) /10;
        }
        return s;
    }
    function getWheelStep(curScale){
        if(curScale >= 10.0) return 2.0;
        else if(curScale >=3.0) return 1.0;
        else return 0.08;
    }
    function getButtonStep(curScale){
        if(curScale >=10.0) return 4.0;
        else if(curScale >=3.0) return 2.0;
        else return 0.16;
    }

function showZoomIndicator(){
        zoomPercent.classList.add('show');
        clearTimeout(hideTimer);
        hideTimer = setTimeout(()=> zoomPercent.classList.remove('show'),1000);
    }

function getFitScreenScale(){
        const imgNaturalW = previewImg.naturalWidth || previewImg.width;
        const imgNaturalH = previewImg.naturalHeight || previewImg.height;
        const size = getRotatedSize(imgNaturalW, imgNaturalH, rotateDeg);
        const viewW = window.innerWidth;
        const viewH = window.innerHeight;
        return Math.min(viewW / size.w, viewH / size.h);
    }

//组装transform
    function applyTransform(){
        let flipStr = '';
        if(flipH) flipStr += 'scaleX(-1) ';
        if(flipV) flipStr += 'scaleY(-1) ';
        previewImg.style.transform = `translate(calc(-50% + ${offsetX}px), calc(-50% + ${offsetY}px)) scale(${scale}) rotate(${rotateDeg}deg) ${flipStr}`;
    }

function updateZoomText(){
        zoomPercent.innerText = Math.round(scale * 100) + '%';
        showZoomIndicator();
        constrainOffset();
        applyTransform();
        updateToggleIcon();
    }

apiList.forEach((item)=>{
        const btn = document.createElement('button');
        btn.className = "api-btn";
        btn.innerText = item.label;
        btn.dataset.api = item.url;
        btnContainer.appendChild(btn);
        btn.addEventListener('click',()=> loadRandomImage(item.url));
    })

showImg.addEventListener('click',function(){
        if(!currentRawImageUrl) return;
        //打开大图重置缩放、偏移、旋转、镜像
        scale = 1;
        offsetX = 0;
        offsetY = 0;
        rotateDeg = 0;
        flipH = false;
        flipV = false;
        previewImg.classList.remove('with-transition');
        previewImg.classList.add('no-transition');
        previewImg.style.opacity = '0';
        previewImg.src = currentRawImageUrl;

previewImg.onload = function(){
            const vw = window.innerWidth * 0.95;
            const vh = window.innerHeight * 0.95;
            const nw = previewImg.naturalWidth;
            const nh = previewImg.naturalHeight;
            scale = Math.min(vw / nw, vh / nh);
            offsetX = 0;
            offsetY = 0;
            requestAnimationFrame(()=>{
                updateZoomText();
                previewImg.style.opacity = '1';
            });
        }
        previewMask.style.display = 'flex';
    })

function closePreview(){
        previewMask.style.display = 'none';
        previewImg.src = '';
        previewImg.style.opacity = '0';
        scale = 1;
        offsetX = 0;
        offsetY = 0;
        rotateDeg = 0;
        flipH = false;
        flipV = false;
        applyTransform();
        clearTimeout(hideTimer);
        zoomPercent.classList.remove('show');
    }
    previewClose.addEventListener('click',closePreview);

previewWrap.addEventListener('click',function(e){
        if(e.target !== previewImg && !e.target.closest('.preview-bottom-bar')){
            closePreview();
        }
    })

//滚轮缩放
    previewMask.addEventListener('wheel',function(e){
        if(previewMask.style.display !== 'flex') return;
        e.preventDefault();
        scale = snapForRange(scale);
        const step = getWheelStep(scale);
        if(e.deltaY < 0) scale += step;
        else scale -= step;
        scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
        const wasOneToOne = Math.abs(scale - SCALE_1X) < 0.001;
        if(!wasOneToOne && scale >= SNAP_LOW && scale <= SNAP_HIGH){
            scale = SCALE_1X;
        }
        updateZoomText();
    },{passive:false})

//鼠标拖拽
    previewImg.addEventListener('mousedown',function(e){
        e.preventDefault();
        mouseDownTime = Date.now();
        startX = e.clientX - offsetX;
        startY = e.clientY - offsetY;
        previewImg.classList.remove('with-transition');
        previewImg.classList.add('no-transition');
    })
    document.addEventListener('mousemove',function(e){
        if(mouseDownTime === 0) return;
        if(Date.now() - mouseDownTime > CLICK_THRESHOLD) isDrag = true;
        if(!isDrag) return;
        offsetX = e.clientX - startX;
        offsetY = e.clientY - startY;
        constrainOffset();
        applyTransform();
    })
    document.addEventListener('mouseup',function(){
        mouseDownTime = 0;
        isDrag = false;
        previewImg.classList.remove('no-transition');
        previewImg.classList.add('with-transition');
    })

//触摸缩放拖拽
    function getTwoTouchDistance(touches){
        const dx = touches[0].clientX - touches[1].clientX;
        const dy = touches[0].clientY - touches[1].clientY;
        return Math.sqrt(dx*dx + dy*dy);
    }
    previewImg.addEventListener('touchstart', function(e){
        previewImg.classList.remove('with-transition');
        previewImg.classList.add('no-transition');
        if(e.touches.length === 2){
            e.preventDefault();
            touchStartDistance = getTwoTouchDistance(e.touches);
            touchStartScale = scale;
        }else if(e.touches.length === 1){
            touchStartX = e.touches[0].clientX;
            touchStartY = e.touches[0].clientY;
            touchOffsetStartX = offsetX;
            touchOffsetStartY = offsetY;
        }
    });
    previewImg.addEventListener('touchmove',function(e){
        if(e.touches.length === 2){
            e.preventDefault();
            const dist = getTwoTouchDistance(e.touches);
            scale = touchStartScale * (dist / touchStartDistance);
            scale = Math.max(MIN_SCALE, Math.min(scale, MAX_SCALE));
            updateZoomText();
        }else if(e.touches.length ===1){
            const moveX = Math.abs(e.touches[0].clientX - touchStartX);
            const moveY = Math.abs(e.touches[0].clientY - touchStartY);
            if(moveX>8 || moveY>8) e.preventDefault();
            offsetX = touchOffsetStartX + (e.touches[0].clientX - touchStartX);
            offsetY = touchOffsetStartY + (e.touches[0].clientY - touchStartY);
            constrainOffset();
            applyTransform();
        }
    });
    previewImg.addEventListener('touchend', function(){
        previewImg.classList.remove('no-transition');
        previewImg.classList.add('with-transition');
    })

//====按钮事件====
    btnPlus.addEventListener('click',()=>{
        scale = snapForRange(scale);
        const step = getButtonStep(scale);
        scale += step;
        scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
        updateZoomText();
    })
    btnMinus.addEventListener('click',()=>{
        scale = snapForRange(scale);
        const step = getButtonStep(scale);
        scale -= step;
        scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
        updateZoomText();
    })
    //自适应切换
    btnToggleMode.addEventListener('click',()=>{
        // 新增：点击切换缩放模式时，恢复原始无旋转、无镜像状态
        rotateDeg = 0;
        flipH = false;
        flipV = false;
    
        const fitScale = getFitScreenScale();
        const isFitMode = Math.abs(scale - fitScale) < SCALE_EQUAL_THRESHOLD;
        offsetX = 0;
        offsetY = 0;
        if(isFitMode){
            scale = 1.0;
        }else{
            scale = fitScale;
        }
        updateZoomText();
    })

//左旋90
    btnRotateLeft.addEventListener('click',()=>{
        rotateDeg -= 90;
        offsetX = 0;
        offsetY = 0;
        updateZoomText();
    })
    //右旋90
    btnRotateRight.addEventListener('click',()=>{
        rotateDeg += 90;
        offsetX = 0;
        offsetY = 0;
        updateZoomText();
    })
    //水平镜像
    btnFlipH.addEventListener('click',()=>{
        flipH = !flipH;
        updateZoomText();
    })
    //垂直镜像
    btnFlipV.addEventListener('click',()=>{
        flipV = !flipV;
        updateZoomText();
    })

document.addEventListener('DOMContentLoaded', function () {
        if(defaultLoadIndex !== null && apiList[defaultLoadIndex]){
            loadRandomImage(apiList[defaultLoadIndex]);
        }
    });
</script>
</body>
</html>
!!!

100%

♥♥♥不可以涩涩哟♥♥♥
PC：右键 - 另存为 - 可保存图片
手机：长按 - 可保存图片

文章到此结束

Last modification：August 21, 2026

如果觉得我的文章对你有用，请随意赞赏

随机图片生成

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

关于本站

Base64互转

猫羽雫

逆战：未来

随机图片生成

Base64互转

随机图片生成

关于本站

逆战：未来

猫羽雫

随机图片生成

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

随机图片生成

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款