修復圖片瀏覽器
// ==UserScript==
// @name hbl917070圖片瀏覽器-2025修復版
// @description 修復圖片瀏覽器
// @include *.jpg
// @include *.jpeg
// @include *.png
// @include *.gif
// @include *.jpg?*
// @include *.jpeg?*
// @include *.png?*
// @include *.gif?*
// @exclude *://raw.githubusercontent.com/*
// @exclude *://*.raw.githubusercontent.com/*
// @noframes
// @run-at document-start
// @version 1.06
// @grant none
// @namespace Jeffrey
// @author Jeffrey
// @license MIT
// ==/UserScript==
/*
最後更新：2025-09-20
hbl91707（深海異音）在2017寫的圖片瀏覽器壞掉了，經過我（Jeffrey）修復，並且加強了沙箱環境的檢測。
以下保持原代碼，但是增加了【固定控制列】的功能，讓使用者可以隨時看到目前的縮放比例，並且可以隨時點擊按鈕來操作。
-------
說明：安裝後，瀏覽器開啟圖片就會用此【圖片瀏覽器】來檢視。
1.滑鼠滾輪 = 縮放圖片
2.放大圖片快速鍵：【+】or【shift】
3.縮小圖片快速鍵：【-】or【ctrl】
4.當圖片超過視窗範圍，可直接拖曳
原作者：hbl91707（深海異音）
http://home.gamer.com.tw/homeindex.php?owner=hbl917070
*/
// 立即檢測並阻止在禁止環境中執行
(function () {
"use strict";
// 檢測 GitHub Raw 域名 - 立即退出
if (
window.location.hostname === "raw.githubusercontent.com" ||
window.location.hostname.endsWith(".raw.githubusercontent.com")
) {
console.log("圖片瀏覽器: 檢測到 GitHub Raw 環境，腳本已立即停止執行");
return;
}
// 檢測是否在 iframe/沙箱環境中
if (window.parent !== window || window.top !== window) {
console.log("圖片瀏覽器: 檢測到 iframe 環境，腳本已立即停止執行");
return;
}
// 檢測沙箱限制
try {
var testStorage = localStorage;
testStorage.setItem("__userscript_test__", "test");
testStorage.removeItem("__userscript_test__");
} catch (e) {
console.log("圖片瀏覽器: 檢測到沙箱限制，腳本已立即停止執行");
return;
}
})();
//強化沙箱環境檢測
function checkSandboxEnvironment() {
try {
// 優先檢測 GitHub Raw 域名
if (
window.location.hostname === "raw.githubusercontent.com" ||
window.location.hostname.endsWith(".raw.githubusercontent.com") ||
window.location.href.includes("raw.githubusercontent.com")
) {
return true;
}
// 檢測是否在 iframe 或 frame 中
if (
window.parent !== window ||
window.top !== window ||
window.frameElement !== null
) {
return true;
}
// 檢測沙箱屬性
if (window.frameElement && window.frameElement.hasAttribute("sandbox")) {
return true;
}
// 檢測 localStorage 是否可用
try {
var testKey = "__userscript_sandbox_test__";
localStorage.setItem(testKey, "test");
var testValue = localStorage.getItem(testKey);
localStorage.removeItem(testKey);
if (testValue !== "test") {
return true;
}
} catch (e) {
return true;
}
// 檢測 DOM 操作限制
try {
var testElement = document.createElement("div");
testElement.innerHTML = "<span>test</span>";
if (!testElement.innerHTML) {
return true;
}
} catch (e) {
return true;
}
return false;
} catch (e) {
return true; // 任何檢測錯誤都視為沙箱環境
}
}
//判斷是否需要執行
var bool_run = true;
// 第二層沙箱環境檢測 - 如果檢測到沙箱環境則安全退出
if (checkSandboxEnvironment()) {
console.log("圖片瀏覽器: 檢測到沙箱環境，腳本已安全退出");
bool_run = false;
}
if (document.body.getElementsByTagName("img").length < 1) {
bool_run = false;
}
// 放寬檢查條件以支援現代瀏覽器
if (document.body.getElementsByTagName("a").length > 5) {
bool_run = false;
}
if (document.body.getElementsByTagName("div").length > 10) {
bool_run = false;
}
if (bool_run) {
var add_html = `
<div id="img_d" style="display:none;" onclick="fun_close_imgbox()"></div>
<div id="img_box" style="display:none;">
<div class="img_tit">
<a target="_blank" href="" id="img_open_url" style="display:none">
<button style="background-image:url(img/URL.png);background-size: 65% 65%;" onclick=""></button>
</a>
<button id="bu_full" title="自動滿版 (auto full)" onclick="fun_zoomMode('full')" class="bu_sel" style="background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWcluWxpF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjUwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MCA1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjcuOCw2LjggMTUuMSw2LjggMTUuMSwzLjMgNC4zLDMuMyA0LjMsMTQuMSA3LjgsMTQuMSAiLz4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMzYuOSwzLjMgMzYuOSw2LjggNDQuMiw2LjggNDQuMiwxNC4xIDQ3LjcsMTQuMSA0Ny43LDMuMyAiLz4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNDQuMiw0My4yIDM2LjksNDMuMiAzNi45LDQ2LjcgNDcuNyw0Ni43IDQ3LjcsMzUuOSA0NC4yLDM1LjkgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjcuOCwzNS45IDQuMywzNS45IDQuMyw0Ni43IDE1LjEsNDYuNyAxNS4xLDQzLjIgNy44LDQzLjIgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjI4LjIyNywyNy4yMjYgMzcuMDQsMjcuMjI2IDM3LjA0LDMzLjk2MyA0MS4zNTIsMjkuNDggNDUuNjY3LDI0Ljk5OSA0MS4zNTIsMjAuNTE5IDM3LjA0LDE2LjAzNyANCgkzNy4wNCwyMi43NzMgMjguMjI4LDIyLjc3MyAyOC4yMjgsMTMuOTYxIDM0Ljk2MywxMy45NjEgMzAuNDgxLDkuNjQ4IDI2LDUuMzMzIDIxLjUyLDkuNjQ4IDE3LjAzNywxMy45NjEgMjMuNzc0LDEzLjk2MSANCgkyMy43NzQsMjIuNzczIDE0Ljk2MSwyMi43NzMgMTQuOTYxLDE2LjAzNyAxMC42NDgsMjAuNTE5IDYuMzMzLDI1IDEwLjY0OCwyOS40OCAxNC45NjEsMzMuOTYzIDE0Ljk2MSwyNy4yMjYgMjMuNzc0LDI3LjIyNiANCgkyMy43NzQsMzYuMDQgMTcuMDM3LDM2LjA0IDIxLjUyLDQwLjM1MiAyNi4wMDEsNDQuNjY3IDMwLjQ4MSw0MC4zNTIgMzQuOTYzLDM2LjA0IDI4LjIyNywzNi4wNCAiLz4NCjwvc3ZnPg0K)"></button>
<button id="bu_full_h" title="寬度滿版 (horizontal full)" onclick="fun_zoomMode('h')" style="background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWcluWxpF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjUwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MCA1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjMuMywxNC4xIDYuOCwxNC4xIDYuOCw2LjggMTQuMSw2LjggMTQuMSwzLjMgMy4zLDMuMyAiLz4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMzUuOSwzLjMgMzUuOSw2LjggNDMuMiw2LjggNDMuMiwxNC4xIDQ2LjcsMTQuMSA0Ni43LDMuMyAiLz4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNDMuMiw0My4yIDM1LjksNDMuMiAzNS45LDQ2LjcgNDYuNyw0Ni43IDQ2LjcsMzUuOSA0My4yLDM1LjkgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjYuOCwzNS45IDMuMywzNS45IDMuMyw0Ni43IDE0LjEsNDYuNyAxNC4xLDQzLjIgNi44LDQzLjIgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjM2LjAzOSwzMy45NjMgNDAuMzUyLDI5LjQ4MSA0NC42NjcsMjUgNDAuMzUyLDIwLjUyIDM2LjAzOSwxNi4wMzcgMzYuMDM5LDIyLjc3NCAxMy45NiwyMi43NzQgDQoJMTMuOTYsMTYuMDM3IDkuNjQ4LDIwLjUyIDUuMzMzLDI1LjAwMSA5LjY0OCwyOS40ODEgMTMuOTYsMzMuOTYzIDEzLjk2LDI3LjIyNyAzNi4wMzksMjcuMjI4ICIvPg0KPC9zdmc+DQo=)"></button>
<button id="bu_full_v" title="高度滿版 (vertical full)" onclick="fun_zoomMode('v')" style="background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWcluWxpF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjUwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MCA1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjMuMywxNC4xIDYuOCwxNC4xIDYuOCw2LjggMTQuMSw2LjggMTQuMSwzLjMgMy4zLDMuMyAiLz4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMzUuOSwzLjMgMzUuOSw2LjggNDMuMiw2LjggNDMuMiwxNC4xIDQ2LjcsMTQuMSA0Ni43LDMuMyAiLz4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNDMuMiw0My4yIDM1LjksNDMuMiAzNS45LDQ2LjcgNDYuNyw0Ni43IDQ2LjcsMzUuOSA0My4yLDM1LjkgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjYuOCwzNS45IDMuMywzNS45IDMuMyw0Ni43IDE0LjEsNDYuNyAxNC4xLDQzLjIgNi44LDQzLjIgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjMzLjk2MywxMy45NjEgMjkuNDgxLDkuNjQ4IDI1LDUuMzMzIDIwLjUyLDkuNjQ4IDE2LjAzNywxMy45NjEgMjIuNzc0LDEzLjk2MSAyMi43NzQsMzYuMDQgDQoJMTYuMDM3LDM2LjA0IDIwLjUyLDQwLjM1MiAyNS4wMDEsNDQuNjY3IDI5LjQ4MSw0MC4zNTIgMzMuOTYzLDM2LjA0IDI3LjIyNywzNi4wNCAyNy4yMjgsMTMuOTYxICIvPg0KPC9zdmc+DQo=)"></button>
<input type="text" id="text_scale" title="預設的縮放比例" style="display:none" />
<div class="break"></div>
<button id="but_imgSizeAdd" title="放大 (zoom in) [ + or shift ]" onclick="fun_imgSizeAdd()" style="background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2Rpc3BsYXk6bm9uZTt9DQoJLnN0MXtkaXNwbGF5OmlubGluZTt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnIGlkPSLlnJblsaRfMSIgY2xhc3M9InN0MCI+DQoJPHJlY3QgY2xhc3M9InN0MSIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+DQo8L2c+DQo8ZyBpZD0i5ZyW5bGkXzIiPg0KCTxyZWN0IHg9IjIyLjMiIHk9IjYuMSIgY2xhc3M9InN0MiIgd2lkdGg9IjUuNCIgaGVpZ2h0PSIzNy44Ii8+DQoJPHJlY3QgeD0iNi4xIiB5PSIyMi4zIiBjbGFzcz0ic3QyIiB3aWR0aD0iMzcuOCIgaGVpZ2h0PSI1LjQiLz4NCjwvZz4NCjwvc3ZnPg0K)"></button>
<button id="but_imgSizeSubtrat" title="縮小 (zoom out) [ - or ctrl ]" onclick="fun_imgSizeSubtrat()" style="background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2Rpc3BsYXk6bm9uZTt9DQoJLnN0MXtkaXNwbGF5OmlubGluZTt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnIGlkPSLlnJblsaRfMSIgY2xhc3M9InN0MCI+DQoJPHJlY3QgY2xhc3M9InN0MSIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+DQo8L2c+DQo8ZyBpZD0i5ZyW5bGkXzIiPg0KCTxyZWN0IHg9IjYuMSIgeT0iMjIuMyIgY2xhc3M9InN0MiIgd2lkdGg9IjM3LjgiIGhlaWdodD0iNS40Ii8+DQo8L2c+DQo8L3N2Zz4NCg==)"></button>
<div class ="break"></div>
<button id="but_white" title="黑白切換 (black and white switch)" onclick="fun_switch()" style="background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMC4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5ZyW5bGkXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDAgNDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwIDQwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Qxe3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Qye2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQoJLnN0M3tmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjIyIiBjeT0iMjciIHI9IjExLjUiLz4NCjxjaXJjbGUgY2xhc3M9InN0MSIgY3g9IjE0LjEiIGN5PSIxMy43IiByPSIxMS41Ii8+DQo8Zz4NCgk8cGF0aCBjbGFzcz0ic3QyIiBkPSJNMjkuMSw1LjFjMCwwLDEyLjctMC41LDYuNSwxMS42Ii8+DQoJPHBvbHlnb24gY2xhc3M9InN0MyIgcG9pbnRzPSIzMC45LDguNSAyNS4xLDUuNSAzMC42LDIgCSIvPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDMiIHBvaW50cz0iMzkuMiwxNi4yIDM0LjQsMjAuNSAzMy4xLDE0LjEgCSIvPg0KPC9nPg0KPC9zdmc+DQo=)"></button>
<div class ="break"></div>
<div id="img_t2" title="圖片長寬 (image size)"></div>
<button id="but_close" onclick="fun_close_imgbox()" title="關閉 (close) [ esc ]" style='background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qze2ZpbGw6I0ZGRkZGRjt9DQo8L3N0eWxlPg0KPGcgaWQ9IuWcluWxpF80Ij4NCgk8cG9seWdvbiBjbGFzcz0ic3QzIiBwb2ludHM9IjQwLjIsMTMuNiAzNi40LDkuOCAyNSwyMS4yIDEzLjYsOS44IDkuOCwxMy42IDIxLjIsMjUgOS44LDM2LjQgMTMuNiw0MC4yIDI1LDI4LjggMzYuNCw0MC4yIA0KCQk0MC4yLDM2LjQgMjguOCwyNSAJIi8+DQo8L2c+DQo8L3N2Zz4NCg==)' ></button>
</div>
<div class="img_text">
<input type="text" id="img_t1">
</div>
<div id="img_content">
<div id="img_w"> </div>
<img id="img_img" />
</div>
</div>
<!-- 固定控制條 -->
<div id="fixed_control_bar" style="display:none;">
<span id="zoom_percentage">100%</span>
<button id="ctrl_zoom_out" title="縮小 (-)" onclick="fun_imgSizeSubtrat()">－</button>
<button id="ctrl_zoom_in" title="放大 (+)" onclick="fun_imgSizeAdd()">＋</button>
<button id="ctrl_reset" title="重置 (100%)" onclick="fun_resetZoom()">100%</button>
<button id="ctrl_close" title="關閉 (X)" onclick="fun_close_imgbox()">✕</button>
</div>
<div style="text-align:center; "></div>
<!--css 框-->
<style type="text/css">
.sp {
border: none;
text-align: center;
display: block;
margin-top: 10px ;
}
/*圖片的上方列*/
.sp.tit {
display: none;
}
.sp img {
position: static;
margin: 20px auto;
width: 90vw;
}
</style>
<!--css 一般樣式-->
<style type="text/css">
html, body {
padding: 0px;
margin: 0px;
background: none ;
background-image: none !important;
}
body{
background-color: rgba(0, 0, 0, 0) !important;
}
html {
font-family: "微軟正黑體";
background-color: rgb(30, 30, 30);
color: #fff;
}
</style>
<!--css 圖片檢視視窗-->
<style type="text/css">
#img_box {
width: 100vw;
height: 100vh;
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
box-shadow: 0px 0px 16px 1px;
z-index: 100;
}
#img_content {
height: calc(100% - 0px);
width: calc(100% - 50px);
border: 0px solid rgba(255, 255, 255, 0.2);
overflow: auto;
margin: 0px;
margin-left: 40px;
position: relative;
}
#img_w {
/*width: 100%;
height: 100%;*/
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
background-color: rgba(50,50,250,0);
}
#img_img {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
border : 0px rgba(0,0,0,0) solid;
/*box-shadow: 0px 0px 20px rgba(0,0,0,0.85);*/
/*避免圖片被反白 */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#img_d {
height: 100vh;
width: 100vw;
position: fixed;
top: 0px;
z-index: 99;
}
.img_tit {
height: 100%;
width: 50px;
float: left;
background-color: rgba(0, 0, 0, 0.5);
}
#img_t1{
font-size: 16px !important;
display: block;
background-color: rgba(0, 0, 0, 0);
color: #fff;
margin-left: 10px;
border: none;
width: calc(100% -460px);
display: block;
height: 20px;
margin-top: 2px;
display: none;
}
/*顯示長寬*/
#img_t2{
width:100%;
color: #fff;
margin-top: 10px;
text-align: center;
font-size:15px;
}
#text_scale {
float: right;
background-color: rgba(0, 0, 0, 0.30);
border: 2px solid rgba(255, 255, 255, 0.70);
width: 35px;
height: 34px;
margin-top: 5px;
margin-right: 5px;
display: block;
font-size: 18px !important;
font-family: "微軟正黑體";
font-weight: 900;
color: #fff;
text-align: center;
}
.img_tit button {
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0);
border: none;
display: block;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 80% 80%;
}
.bu_sel {
/*outline: solid 4px #4CB4FF !important;
width: 42px !important;
height: 42px !important;
margin: 4px;*/
}
.img_tit button:hover {
background-color: rgba(0, 122, 255, 0.40);
}
.img_tit button:focus {
outline: 0;
}
.img_tit .break {
margin: 3px 0px;
border: none;
float: right;
width: 100%;
height: 1px;
background-color: #fff;
}
#but_l:active {
transform: translateY(3px) scaleX(-1);
}
#but_close {
bottom: 0px;
position: absolute;
}
/* 固定控制條樣式 */
#fixed_control_bar {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
padding: 10px 20px;
border-radius: 25px;
display: flex;
align-items: center;
gap: 15px;
z-index: 10001;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
font-family: "微軟正黑體";
}
#zoom_percentage {
color: white;
font-size: 14px;
min-width: 60px;
text-align: center;
font-weight: bold;
}
#fixed_control_bar button {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 8px 12px;
border-radius: 15px;
cursor: pointer;
font-family: "微軟正黑體";
font-size: 14px;
transition: all 0.2s;
font-weight: bold;
}
#fixed_control_bar button:hover {
background: rgba(255, 255, 255, 0.3);
}
#fixed_control_bar button:focus {
outline: none;
}
#ctrl_close {
background: rgba(255, 0, 0, 0.6) !important;
margin-left: 10px;
}
#ctrl_close:hover {
background: rgba(255, 0, 0, 0.8) !important;
}
</style>
`;
//----------------------------------------------------
//<!-- js 計算圖片長寬-->
//把【長、寬】顯示在圖片上面
function d(img, aa) {
var size = fun_getImgSize(img);
document.getElementById(aa).innerHTML =
"w:" + size[0] + " h:" + size[1] + "";
}
//取得圖片長寬
function fun_getImgSize(img) {
var nWidth;
var nHeight;
if (img.naturalWidth) {
// 現代瀏覽器
nWidth = img.naturalWidth;
nHeight = img.naturalHeight;
} else {
// IE6/7/8
var image = new Image();
image.src = img.src;
nWidth = image.width;
nHeight = image.height;
image = null;
}
return new Array(nWidth, nHeight);
}
//----------------------------------------------------
//<!-- js 拖曳-->
var xxx;
var yyy;
var double_keen = 1.5; //拖曳靈敏度
var bool_允許拖曳瀏覽 = true; //如果圖片長寬都低於螢幕，則取消拖曳瀏覽，讓使用者可以利用拖曳拉儲存圖片
var obj_img_content;
var obj_img;
var obj_img_w;
function main() {
document.getElementById("text_scale").value = "98"; //設定初始值
fun_open_imgbox(0);
//避免事件無法註冊成功
document.getElementById("but_close").onclick = function () {
fun_close_imgbox();
};
document.getElementById("but_imgSizeAdd").onclick = function () {
fun_imgSizeAdd();
};
document.getElementById("but_imgSizeSubtrat").onclick = function () {
fun_imgSizeSubtrat();
};
document.getElementById("bu_full").onclick = function () {
fun_zoomMode("full");
};
document.getElementById("bu_full_h").onclick = function () {
fun_zoomMode("h");
};
document.getElementById("bu_full_v").onclick = function () {
fun_zoomMode("v");
};
document.getElementById("img_img").onload = function () {
d(document.getElementById("img_img"), "img_t2");
};
document.getElementById("cont").onclick = function () {
fun_open_imgbox(0);
};
document.getElementById("but_white").onclick = function () {
fun_switch();
};
//固定控制條事件註冊
document.getElementById("ctrl_zoom_in").onclick = function () {
fun_imgSizeAdd();
};
document.getElementById("ctrl_zoom_out").onclick = function () {
fun_imgSizeSubtrat();
};
document.getElementById("ctrl_reset").onclick = function () {
fun_resetZoom();
};
document.getElementById("ctrl_close").onclick = function () {
fun_close_imgbox();
};
var m_x;
var m_y;
var m_top;
var m_left;
obj_img_content = document.getElementById("img_content");
obj_img = document.getElementById("img_img");
obj_img_w = document.getElementById("img_w");
obj_img_content.addEventListener(
"mousedown",
function (e) {
//按下時，註冊事件
if (bool_允許拖曳瀏覽) {
e.preventDefault(); //取消點擊事件
document.onmousemove = mousemove;
m_x = e.screenX;
m_y = e.screenY;
m_top = obj_img_content.scrollTop;
m_left = obj_img_content.scrollLeft;
}
},
false
);
function mousemove(e) {
var int_top = m_top + (m_y - e.screenY) * double_keen;
var int_left = m_left + (m_x - e.screenX) * double_keen;
var int_捲軸寬度x =
obj_img_content.offsetWidth - obj_img_content.clientWidth;
var int_捲軸寬度y =
obj_img_content.offsetHeight - obj_img_content.clientHeight;
//當拖曳超出捲軸最大之時，則重新抓取拖動前記錄的坐標，這樣就不用返回到原點才能往回拖曳
if (int_top < 0) {
m_y = e.screenY;
m_top = 0;
}
if (
int_top >=
obj_img.offsetHeight - obj_img_content.offsetHeight + int_捲軸寬度y + 60
) {
//外距是30，所以+60
m_y = e.screenY;
m_top =
obj_img.offsetHeight -
obj_img_content.offsetHeight +
int_捲軸寬度y +
60;
}
if (int_left < 0) {
m_x = e.screenX;
m_left = 0;
}
if (
int_left >=
obj_img.offsetWidth - obj_img_content.offsetWidth + int_捲軸寬度x + 60
) {
m_x = e.screenX;
m_left =
obj_img.offsetWidth -
obj_img_content.offsetWidth +
int_捲軸寬度x +
60;
}
obj_img_content.scrollTop = int_top;
obj_img_content.scrollLeft = int_left;
}
document.onmouseup = function () {
//放開時，取消事件
document.onmousemove = null;
};
}
//----------------------------------------------------
//<!-- js 放大-->
var int_size = 100;
var bool_視窗開啟 = false;
var img_sel = 0;
var img_size;
// 註冊滾動事件 - 支援現代瀏覽器
if ("onwheel" in window) {
// 現代瀏覽器使用 wheel 事件
window.addEventListener("wheel", MouseWheel, { passive: false });
} else if ("onmousewheel" in window) {
window.addEventListener("mousewheel", MouseWheel, { passive: false });
} else if ("addEventListener" in window) {
// Firefox 舊版本
window.addEventListener("DOMMouseScroll", MouseWheel, { passive: false });
}
function MouseWheel(e) {
if (bool_視窗開啟 === false) {
return;
}
e.preventDefault(); //禁止頁面滾動
e = e || window.event;
//縮放計算
if (e.wheelDelta <= 0 || e.detail > 0) {
fun_imgSizeSubtrat(e);
} else {
fun_imgSizeAdd(e);
}
}
//更新控制條的縮放比例顯示
function updateZoomPercentage() {
var percentage = Math.round(int_size);
document.getElementById("zoom_percentage").textContent = percentage + "%";
}
//重置縮放到100%
function fun_resetZoom() {
int_size = 100;
fun_imgSizeChange();
updateZoomPercentage();
//重置位置到中央
if (document.getElementById("img_content")) {
document.getElementById("img_content").scrollTop = 0;
document.getElementById("img_content").scrollLeft = 0;
}
}
//縮小圖片
function fun_imgSizeSubtrat(e) {
int_size *= 0.9;
if (int_size <= 5) {
int_size /= 0.9;
return;
}
//如果不是透過滾輪來縮放，就從中央作為縮放起點
if (e === undefined) {
e = { clientX: 0, clientY: 0 };
e.clientX = obj_img_content.offsetWidth / 2;
e.clientY = obj_img_content.offsetHeight / 2;
}
//計算游標目前在圖片的坐標
xxx = e.clientX - obj_img_w.offsetLeft - 50 + obj_img_content.scrollLeft;
yyy = e.clientY - obj_img_w.offsetTop - 0 + obj_img_content.scrollTop;
//計算圖片改變大小後的差距
var xx2 = obj_img.offsetWidth - obj_img.offsetWidth * 0.9;
var yy2 = obj_img.offsetHeight - obj_img.offsetHeight * 0.9;
//儲存目前的捲軸位置
var top2 = obj_img_content.scrollTop;
var left2 = obj_img_content.scrollLeft;
fun_imgSizeChange(); //改變大小
updateZoomPercentage(); //更新縮放比例顯示
obj_img_content.scrollTop = top2 - (yyy / obj_img.offsetHeight) * yy2 * 0.9;
obj_img_content.scrollLeft =
left2 - (xxx / obj_img.offsetWidth) * xx2 * 0.9;
}
//放大圖片
function fun_imgSizeAdd(e) {
int_size *= 1.1;
if (int_size >= 6000) {
int_size /= 1.1;
return;
}
fun_imgSizeChange();
updateZoomPercentage(); //更新縮放比例顯示
//如果不是透過滾輪來縮放，就從中央作為縮放起點
if (e == undefined) {
e = { clientX: 0, clientY: 0 };
e.clientX = obj_img_content.offsetWidth / 2;
e.clientY = obj_img_content.offsetHeight / 2;
}
xxx = e.clientX - obj_img_w.offsetLeft - 50 + obj_img_content.scrollLeft;
yyy = e.clientY - obj_img_w.offsetTop - 0 + obj_img_content.scrollTop;
var xx2 = obj_img.offsetWidth - obj_img.offsetWidth / 1.1;
var yy2 = obj_img.offsetHeight - obj_img.offsetHeight / 1.1;
obj_img_content.scrollTop += (yyy / obj_img.offsetHeight) * yy2 * 1.1;
obj_img_content.scrollLeft += (xxx / obj_img.offsetWidth) * xx2 * 1.1;
}
//----------------------------------------------------
//<!-- js 圖片檢視視窗-->
//
function fun_switch() {
var html = document.getElementsByTagName("html")[0];
if (html.getAttribute("white") == "true") {
html.style.backgroundColor = "rgb(30, 30, 30)";
html.style.color = "#FFF";
document.body.style.color = "#FFF";
html.setAttribute("white", "false");
} else {
html.style.backgroundColor = "#EEE";
html.style.color = "#000";
document.body.style.color = "#000";
html.setAttribute("white", "true");
}
}
//關閉視窗
function fun_close_imgbox() {
bool_視窗開啟 = false;
document.getElementById("img_box").style.display = "none";
document.getElementById("img_d").style.display = "none";
document.getElementById("fixed_control_bar").style.display = "none"; //隱藏控制條
document.getElementsByClassName("sp")[0].style.display = "block"; //顯示圖片
document.getElementsByTagName("body")[0].style.overflow = "auto"; //捲軸
}
//開啟視窗
function fun_open_imgbox(x) {
img_sel = x;
bool_視窗開啟 = true;
document.getElementById("img_box").style.display = "block";
document.getElementById("img_d").style.display = "block";
document.getElementById("fixed_control_bar").style.display = "flex"; //顯示控制條
document.getElementById("img_img").src = urls[x];
document.getElementById("img_open_url").href = urls[img_sel];
document.getElementsByTagName("body")[0].style.overflow = "hidden";
document.getElementsByClassName("sp")[0].style.display = "none"; //隱藏圖片
//圖片載入完成後計算長寬并顯示
document.getElementById("img_img").onload = function () {
img_size = fun_getImgSize(document.getElementById("img_img")); //取得圖片寬高
fun_100scale();
fun_imgTitle();
updateZoomPercentage(); //更新控制條的縮放比例顯示
};
}
//修改視窗顯示的資訊
function fun_imgTitle() {
document.getElementById("img_t2").innerHTML =
img_size[0] + "<br>" + img_size[1];
document.getElementById("img_t1").value = urls[img_sel];
}
var bool_width; //判斷縮放方式
var st_zoomMode = "full";
//選擇縮放模式
function fun_zoomMode(x) {
st_zoomMode = x;
document.getElementById("bu_full").className = "";
document.getElementById("bu_full_h").className = "";
document.getElementById("bu_full_v").className = "";
if (x == "full") {
document.getElementById("bu_full").className = "bu_sel";
} else if (x == "v") {
document.getElementById("bu_full_v").className = "bu_sel";
} else if (x == "h") {
document.getElementById("bu_full_h").className = "bu_sel";
}
fun_100scale();
}
//圖片 初始 & 最大 化
function fun_100scale() {
int_size = 100;
try {
int_size = Number(document.getElementById("text_scale").value);
if (int_size < 10) {
int_size = 10;
} else if (int_size > 500) {
int_size = 500;
} else if (isNaN(int_size)) {
int_size = 100;
}
document.getElementById("text_scale").value = int_size + "";
} catch (e) {
int_size = 100;
document.getElementById("text_scale").value = "100";
}
if (st_zoomMode == "full") {
//圖片滿版，需要判斷
if (img_size[0] & img_size[1]) {
var obj_content = document.getElementById("img_content");
if (
img_size[0] / obj_content.offsetWidth >
img_size[1] / obj_content.offsetHeight
) {
bool_width = true;
} else {
bool_width = false;
}
} else {
bool_width = false;
}
} else if (st_zoomMode == "v") {
bool_width = false;
} else if (st_zoomMode == "h") {
bool_width = true;
}
fun_imgSizeChange();
updateZoomPercentage(); //更新縮放比例顯示
//如果圖片比視窗大，就初始化位置
if (
document.getElementById("img_content").offsetHeight <
document.getElementById("img_img").offsetHeight
) {
document.getElementById("img_content").scrollTop = 0;
}
if (
document.getElementById("img_content").offsetWidth <
document.getElementById("img_img").offsetWidth
) {
document.getElementById("img_content").scrollLeft = 0;
}
}
//縮放
function fun_imgSizeChange() {
var obj_img = document.getElementById("img_img");
var obj_con = document.getElementById("img_content");
if (bool_width) {
//document.getElementById("img_img").style.width = int_size + "%";
obj_img.style.width =
(document.getElementById("img_content").offsetWidth * int_size) / 100 -
60 +
"px";
document.getElementById("img_img").style.height = "auto";
} else {
//document.getElementById("img_img").style.height = int_size + "%";
obj_img.style.height =
(document.getElementById("img_content").offsetHeight * int_size) / 100 -
60 +
"px";
document.getElementById("img_img").style.width = "auto";
}
obj_img_w.style.width = obj_img.offsetWidth + 60 + "px";
obj_img_w.style.height = obj_img.offsetHeight + 60 + "px";
//避免chrome出現跑版的現象
if (obj_con.offsetHeight < obj_img_w.offsetHeight) {
obj_img.style.marginTop = "30px";
obj_img_w.style.marginTop = "0px";
} else {
obj_img.style.marginTop = "auto";
obj_img_w.style.marginTop = "auto";
}
if (obj_con.offsetWidth < obj_img_w.offsetWidth) {
obj_img.style.marginLeft = "30px";
} else {
obj_img.style.marginLeft = "auto";
}
//如果圖片長寬超出版面，才允許使用拖曳瀏覽
if (
obj_con.offsetHeight >= obj_img_w.offsetHeight &&
obj_con.offsetWidth >= obj_img_w.offsetWidth
) {
bool_允許拖曳瀏覽 = false;
} else {
bool_允許拖曳瀏覽 = true;
}
}
//按下按鍵
document.onkeydown = function (e) {
var currKey = 0;
e = e || window.event;
currKey = e.keyCode || e.which || e.charCode;
if (bool_視窗開啟) {
if (currKey == 38 || currKey == 104) {
//上 8
document.getElementById("img_content").scrollTop -= 50;
e.preventDefault();
} else if (currKey == 40 || currKey == 101) {
//下 5
document.getElementById("img_content").scrollTop += 50;
e.preventDefault();
} else if (currKey == 100 || currKey == 37) {
//左 4
document.getElementById("img_content").scrollLeft -= 50;
e.preventDefault();
} else if (currKey == 102 || currKey == 39) {
//右 6
document.getElementById("img_content").scrollLeft += 50;
e.preventDefault();
} else if (currKey == 107 || currKey == 16) {
// 放大 + shift
fun_imgSizeAdd();
e.preventDefault();
} else if (currKey == 109 || currKey == 17) {
//縮小 - ctrl
fun_imgSizeSubtrat();
e.preventDefault();
}
} else {
if (currKey == 38) {
document.body.scrollTop -= 50;
e.preventDefault();
} else if (currKey == 40) {
document.body.scrollTop += 50;
e.preventDefault();
}
}
};
//放開按鍵時
document.onkeyup = function (e) {
var currKey = 0,
e = e || event;
currKey = e.keyCode || e.which || e.charCode;
var keyName = String.fromCharCode(currKey);
if (bool_視窗開啟) {
if (currKey == 27) {
//關閉視窗
fun_close_imgbox();
}
}
};
var src = document.body.getElementsByTagName("img")[0].src;
document.body
.getElementsByTagName("img")[0]
.parentNode.removeChild(document.body.getElementsByTagName("img")[0]);
var urls = new Array(src);
var i = 0;
var div = document.createElement("div");
div.innerHTML =
add_html +
"<span class='sp'>" +
"<div class='tit'>" +
"<a href='" +
src +
"' class='open_url' target='_blank'></a>" +
"<div class='le'>" +
"<div style='height=1px'></div>" +
"<div class='wh' id='" +
i +
"'>---</div>" +
"</div>" +
"</div>" +
"<div id='cont' onclick='fun_open_imgbox(\"" +
i +
"\")'>" +
"<img id='img_" +
i +
"' alt=\"" +
src +
'" src="' +
src +
'">' +
"</div></span>";
document.body.appendChild(div);
main();
//---------------------------------
}