Diskuse » Creation Requests

Sankaku Image Preview and Download 悬浮浏览大图,+号下载图片

§
Posted: 30. 03. 2023

// ==UserScript==
// @name Sankaku Image Preview and Download
// @namespace http://tampermonkey.net/
// @version 0.5
// @description Preview original images on Sankaku Complex when hovering over thumbnails and download them
// @author You
// @match *://chan.sankakucomplex.com/*
// @grant none
// ==/UserScript==

(function () {
'use strict';

let hoverTimeout;
let currentImageUrl = null;

const createPreview = () => {
const preview = document.createElement('img');
preview.id = 'image-preview';
preview.style.display = 'none';
preview.style.position = 'fixed';
preview.style.zIndex = 9999;
preview.style.maxWidth = '90%';
preview.style.maxHeight = '90%';
document.body.appendChild(preview);
return preview;
};

const showPreview = (imgUrl, preview) => {
preview.style.display = 'block';
preview.src = imgUrl;
preview.style.left = '50%';
preview.style.top = '50%';
preview.style.transform = 'translate(-50%, -50%)';
console.log('显示预览:', imgUrl);
};

const hidePreview = (preview) => {
preview.style.display = 'none';
preview.src = '';
};
// 获取原图链接的函数
const getOriginalImageUrl = async (thumbnailUrl) => {
const response = await fetch(thumbnailUrl);
const html = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const image = doc.querySelector('img#image');
return image ? image.src : null;
};

const downloadImage = async (imageUrl) => {
if (imageUrl) {
try {
const response = await fetch(imageUrl);
const data = await response.blob();
const blobUrl = URL.createObjectURL(data);

const link = document.createElement('a');
link.href = blobUrl;
link.download = '';
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

// 释放 Blob URL
setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
} catch (error) {
console.error('下载失败:', error);
}
}
};

const onThumbnailMouseEnter = async (e, preview) => {
const target = e.target;
const link = target.closest('a');
if (!link) return;
const thumbnailUrl = link.href;

hoverTimeout = setTimeout(async () => {
const originalImageUrl = await getOriginalImageUrl(thumbnailUrl);
if (!originalImageUrl) return;
currentImageUrl = originalImageUrl;
showPreview(originalImageUrl, preview);
}, 200);
};

const onThumbnailMouseLeave = (preview) => {
clearTimeout(hoverTimeout);
hidePreview(preview);
};

const init = () => {
const container = document.querySelector('.content');
if (!container) return;
const preview = createPreview();

container.addEventListener('mouseover', (e) => onThumbnailMouseEnter(e, preview));
container.addEventListener('mouseout', () => onThumbnailMouseLeave(preview));

// 按下 "+" 键时下载图片
document.addEventListener('keydown', (e) => {
if (e.key === '+' || e.code === 'NumpadAdd') {
downloadImage(currentImageUrl);
}
});
};

init();
})();

§
Posted: 31. 03. 2023

如果你打算发布脚本的话,可以在依次点击中在中的页眉(header)昵称-发布你编写的脚本

Post reply

Sign in to post a reply.

长期地址
遇到问题?请前往 GitHub 提 Issues。