滑鼠移入縮圖時彈出預覽視窗，滑動滾輪切換上下張圖片
目前为
// ==UserScript==
// @name Pixiv鼠標預覽
// @namespace Pixiv鼠標預覽
// @version 2.0
// @description 滑鼠移入縮圖時彈出預覽視窗，滑動滾輪切換上下張圖片
// @author Eltair
// @match https://www.pixiv.net/*
// @connect i.pximg.net
// @grant GM_xmlhttpRequest
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// [可更改的數值]
const BOXSIZE = window.innerHeight * 0.75; // 彈出框寬度，單位px
const SPEED = 0.6; // 鼠標移動到圖上多久後彈出預覽框，單位秒
const ADV = 2; // 多圖時，提前載入的張數
let t = null; // 計時器
let zp = null; // ZipImagePlayer
let css = document.createElement("style"); // css
let line = document.createElement("div"); // 底線
// [設定CSS]
// under css
css.innerText = `@keyframes showUnder { from { width: 0%; } to { width: 100%; } } .under { background-color: #008FEA; height: 2px; position: absolute; bottom: 0; left: 0; width: 0%; } .showUnder { animation: showUnder ${SPEED}s linear; width: 100%; }` ;
// box css
css.innerText += ".imgbox { z-index: 10001; display: block; position: absolute; background-color: #f2f4f6; text-align: center; border: 1px solid #cbd3da; } .imgbox p.tags { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imgbox p { margin: 0; } .imgbox img { vertical-align: middle; } .imgbox .dl { position: absolute; right: 0; bottom: 0; line-height: unset; text-decoration: none; font-weight: 700; color: #1f1f1f; cursor: pointer; } .dl:visited { color: #adadad; } .dl:hover { color: #5c5c5c; } .am { display: flex; align-items: center; justify-content: center; } ";
document.head.appendChild(css);
line.className = "under showUnder";
// [綁定監聽器]
if(location.pathname == "/ranking.php"){
document.querySelector(".ranking-items").addEventListener("mouseover", in_img.bind(null, "_work"));
document.querySelector(".ranking-items").addEventListener("mouseout", out_img.bind(null, "_work"));
} else {
document.querySelector("#root").addEventListener("mouseover", in_img.bind(null, ["sc-rp5asc-10", "sc-7bef31-2"]));
document.querySelector("#root").addEventListener("mouseout", out_img.bind(null, ["sc-rp5asc-10", "sc-7bef31-2"]));
}
// ========== 主要方法 ========== //
// [滑鼠移入圖片]
function in_img(target_class, e) {
if (e.target.classList.contains(target_class[0]) || e.target.classList.contains(target_class[1])) {
e.target.parentNode.appendChild(line);
window.clearTimeout(t);
t = window.setTimeout(function() {
window.clearTimeout(t);
new previewbox(e.target);
}, SPEED * 1000)
}
}
// [滑鼠移出圖片]
function out_img(target_class, e) {
if (e.target.classList.contains(target_class[0]) || e.target.classList.contains(target_class[1])) {
e.target.parentNode.removeChild(line);
window.clearTimeout(t);
}
}
// [預覽框]
function previewbox(target) {
this.size = BOXSIZE; // 彈出框寬度，單位px
this.adv = ADV; // 多圖時，提前載入的張數
this.target = target;
this.original_size = this.size; // 彈出框原始大小
this.pid = null;
this.box = null;
this.box_html = "<p class='tags'>取得標籤中...</p><div class='imgpv' data-cursor='0' style='width: {size}px; height: {size}px; overflow: hidden;'></div><div style='position: relative;' class='under'></div><div style='position: relative;'><p class='count'>1/1</p><p class='dl' data-src=''>下載</p></div>";
this.img_html = "<a href='{href}'><img src='{imgsrc}' style='max-width: {size}px; max-height: {size}px;'></a>";
this._createBox();
return this;
}
// [加入彈出框]
previewbox.prototype._createBox = function() {
let pos = this._calcPosition();
this.pid = this._getId();
this.box = document.createElement("div");
this.box.className = "imgbox";
this.box.innerHTML = this.box_html.replace(/{size}/g, this.size);
this.box.style.top = `${pos.top}px`;
this.box.style.left = `${pos.left}px`;
this.box.style.width = `${this.size + 2}px`;
this.box.addEventListener("mouseleave", this._removeBox);
document.querySelector("body").appendChild(this.box);
this._getData(function(json) {
let body = json.body;
// 動圖或是一般插畫
if(body.illustType == 2) {
this._addAm(body.urls.small);
} else if(body.illustType == 0 || body.illustType == 1) {
this._addImgs(this._getImgurls(body.urls.original, body.pageCount));
}
// 設定標籤
this._addTags(body.tags.tags);
}.bind(this));
}
// [刪除彈出框]
previewbox.prototype._removeBox = function() {
this != null && this.remove();
zp && window.clearTimeout(zp._loadTimer);
zp && window.clearTimeout(zp._timer);
}
// [計算彈出框位置]
previewbox.prototype._calcPosition = function() {
let windowWidth = window.innerWidth,
windowHeight = window.innerHeight,
bounding = this.target.getBoundingClientRect(),
scrollTop = document.documentElement.scrollTop,
scrollLeft = document.documentElement.scrollLeft,
top = 0,
left = 0;
this.size = this.original_size;
if (windowWidth < this.size || windowHeight < this.size) {
this.size = Math.min(windowWidth, windowHeight) / 100 * 80;
}
left = scrollLeft + bounding.left - (this.size - bounding.width) / 2;
top = scrollTop + bounding.top - (this.size - bounding.height) / 2;
// 如果上邊超出視窗
if (top < scrollTop) {
top = scrollTop;
}
// 如果下邊超出視窗
if (top + (this.size + 38) > scrollTop + windowHeight) {
top = windowHeight - (this.size + 38) + scrollTop - (document.documentElement.scrollWidth > document.documentElement.clientWidth ? 15 : 0);
}
// 如果左邊超出視窗
if (left < scrollLeft) {
left = scrollLeft;
}
// 如果右邊超出視窗
if (left + this.size > scrollLeft + windowWidth) {
left = windowWidth - this.size + scrollLeft - 15;
}
return { top: top, left: left };
}
// [插入圖片方法]
previewbox.prototype._addImg = function(url) {
let div = document.createElement("div");
div.style.width = `${this.size}px`;
div.style.height = `${this.size}px`;
div.style.lineHeight = `${this.size}px`;
div.innerHTML = this.img_html.replace(/{href}/g, url[0]).replace(/{imgsrc}/g, url[1]).replace(/{size}/g, this.size);
this.box.querySelector(".imgpv").appendChild(div);
}
// [插入多圖方法]
previewbox.prototype._addImgs = function(urls) {
let cursor = 0; // 當前圖片位置
let imgpv = this.box.querySelector(".imgpv"); // 圖片視窗
let count = this.box.querySelector(".count"); // 頁數
let dl = this.box.querySelector(".dl"); // 下載
// 圖片數量標籤
count.innerText = `1/${urls[1].length}`;
// 圖片下載按鈕
dl.dataset.src = urls[2][0];
dl.addEventListener("click", function() {
GM_xmlhttpRequest({
method: "GET",
url: this.dataset.src,
headers: { referer: "https://www.pixiv.net/" },
responseType: "blob",
onload: function (e) {
let blob = window.URL.createObjectURL(e.response);
let a = document.createElement("a");
a.href = blob;
a.download = e.finalUrl.match(/[0-9]+\_p[0-9]+\..+/g)[0];
a.click();
}
});
});
if(urls[1].length == 1) {
this._addImg([urls[0], urls[1][0]]);
return;
}
// 提前載入圖片
for(let i = 0; i <= this.adv && i < urls[1].length; i++) {
this._addImg([urls[0], urls[1][i]]);
}
// 滾輪移動監聽器
imgpv.addEventListener("mousewheel", function(e) {
e.preventDefault();
// 滾輪往下或往上
if (e.deltaY == 100 && cursor < urls[1].length - 1) {
cursor++;
if (cursor == imgpv.childNodes.length - this.adv && cursor < urls[1].length - this.adv) {
this._addImg([urls[0], urls[1][cursor + this.adv]]);
}
imgpv.childNodes[cursor - 1].style.display = "none";
imgpv.childNodes[cursor].style.display = "block";
} else if (e.deltaY == -100 && cursor > 0) {
cursor--;
imgpv.childNodes[cursor + 1].style.display = "none";
imgpv.childNodes[cursor].style.display = "block";
}
count.innerText = `${cursor + 1}/${urls[1].length}`;
dl.dataset.src = urls[2][cursor];
}.bind(this));
}
// [插入動圖方法]
previewbox.prototype._addAm = function(imgurl) {
let img = new Image();
let canvas = document.createElement("canvas");
let dl = this.box.querySelector(".dl"); // 下載
this.box.querySelector(".imgpv").appendChild(canvas);
img.src = imgurl.replace(/540x540_70/g, "600x600");
img.onload = function() {
canvas.width = this.width;
canvas.height = this.height;
}
canvas.style.maxWidth = `${this.size}px`;
canvas.style.maxHeight = `${this.size}px`;
canvas.parentNode.classList.add("am");
fetch(`https://www.pixiv.net/ajax/illust/${this.pid}/ugoira_meta`).then(function(response) {
if (!response.ok) throw new Error(response.statusText);
return response.json();
}).then(function(json) {
let options = {
canvas: canvas,
source: json.body.src,
metadata: json.body,
chunkSize: 300000,
loop: true,
};
let box = this.box.querySelector(".under");
let count = this.box.querySelector(".count");
zp = new ZipImagePlayer(options);
document.addEventListener("frame", function(e) {
box.style.width = `${e.detail.frame / e.detail.count * 100}%`;
count.innerText = `${e.detail.frame}/${e.detail.count}`;
});
// 圖片下載按鈕
dl.dataset.src = json.body.originalSrc; // json.body.src(小圖) or json.body.originalSrc(原圖)
dl.addEventListener("click", function() {
GM_xmlhttpRequest({
method: "GET",
url: this.dataset.src,
headers: { referer: "https://www.pixiv.net/" },
responseType: "blob",
onload: function (e) {
let blob = window.URL.createObjectURL(e.response);
let a = document.createElement("a");
a.href = blob;
a.download = e.finalUrl.match(/[0-9]+_ugoira/g)[0] + ".zip";
a.click();
}
});
});
}.bind(this)).catch(function(err) {
console.log("抓取動圖資料發生問題:", err);
})
}
// [設定標籤]
previewbox.prototype._addTags = function(tags) {
let R18 = "";
let nR18 = "";
for(let i = 0; i < tags.length; i++) {
if(tags[i].tag.match(/R-18G|R-18|R18|R18G/g)) {
R18 += `${tags[i].tag} `;
} else {
nR18 += `${tags[i].tag} `;
}
}
this.box.querySelector(".tags").innerHTML = `<span style='color: tomato'>${R18}</span>${nR18}`;
}
// [取得圖片ID]
previewbox.prototype._getId = function() {
if (this.target.nodeName == "A") {
// return /illust_id=([0-9]+)/g.exec(this.target.href)[1];
return /([0-9]+)/g.exec(this.target.href)[1];
} else if (this.target.nodeName == "IMG") {
return /\/img\/.+\/([0-9]+)/g.exec(this.target.src)[1];
} else if (this.target.nodeName == "DIV") {
return /\/img\/.+\/([0-9]+)/g.exec(this.target.style.backgroundImage)[1];
}
}
// [取得圖片連結]
previewbox.prototype._getImgurls = function(url, count) {
let urls = [];
let urls_o = [];
let regexp = new RegExp("(\/img\/.+" + this.pid + ")", "g");
let img_date_url = url.match(regexp)[0];
for(let i = 0; i < count; i++) {
urls.push(`https://i.pximg.net/c/600x600/img-master${img_date_url}_p${i}_master1200.jpg`);
urls_o.push(url.replace(/p0/, `p${i}`));
}
return [`https://www.pixiv.net/member_illust.php?mode=medium&illust_id=${this.pid}`, urls, urls_o];
}
// [抓取圖片資料]
// https://www.pixiv.net/ajax/illust/:illustId
// https://www.pixiv.net/ajax/illust/:illustId/pages
// https://www.pixiv.net/ajax/tags/illust/:illustId
// https://www.pixiv.net/ajax/user/:userId
previewbox.prototype._getData = function(fun) {
fetch(`https://www.pixiv.net/ajax/illust/${this.pid}`).then(function(response) {
if (!response.ok) throw new Error(response.statusText);
return response.json();
}).then(fun).catch(function(err) {
console.log("抓取圖片資料發生問題:", err)
})
}
// ========== pixiv zipplayer ========== //
function ZipImagePlayer(options) {
this._Uint8Array = (window.Uint8Array || window.WebKitUint8Array || window.MozUint8Array || window.MSUint8Array);
this._DataView = (window.DataView || window.WebKitDataView || window.MozDataView || window.MSDataView);
this._ArrayBuffer = (window.ArrayBuffer || window.WebKitArrayBuffer || window.MozArrayBuffer || window.MSArrayBuffer);
this.op = options;
this._loadingState = 0;
this._context = options.canvas.getContext("2d");
this._files = {};
this._frameCount = this.op.metadata.frames.length;
this._frame = 0;
this._loadFrame = 0;
this._frameImages = [];
this._paused = false;
this._loadTimer = null;
this._startLoad();
}
ZipImagePlayer.prototype = {
_trailerBytes: 30000,
_load: function(offset, length, callback) {
var _this = this;
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(ev) {
if (xhr.status == 200) {
offset = 0;
length = xhr.response.byteLength;
_this._len = length;
_this._buf = xhr.response;
_this._bytes = new _this._Uint8Array(_this._buf);
} else {
_this._bytes.set(new _this._Uint8Array(xhr.response), offset);
}
if (callback) {
callback.apply(_this, [offset, length]);
}
}, false);
xhr.open("GET", this.op.source);
xhr.responseType = "arraybuffer";
if (offset != null && length != null) {
var end = offset + length;
xhr.setRequestHeader("Range", "bytes=" + offset + "-" + (end - 1));
if (this._isSafari) {
xhr.setRequestHeader("Cache-control", "no-cache");
xhr.setRequestHeader("If-None-Match", Math.random().toString());
}
}
xhr.send();
},
_startLoad: function() {
var _this = this;
var http = new XMLHttpRequest();
http.open('HEAD', this.op.source);
http.onreadystatechange = function() {
if (this.readyState == this.DONE) {
_this._pHead = 0;
_this._pNextHead = 0;
_this._pFetch = 0;
var len = parseInt(this.getResponseHeader("Content-Length"));
_this._len = len;
_this._buf = new _this._ArrayBuffer(len);
_this._bytes = new _this._Uint8Array(_this._buf);
var off = len - _this._trailerBytes;
if (off < 0) {
off = 0;
}
_this._pTail = len;
_this._load(off, len - off, function(off, len) {
_this._pTail = off;
_this._findCentralDirectory();
});
}
};
http.send();
},
_findCentralDirectory: function() {
var dv = new this._DataView(this._buf, this._len - 22, 22);
var cd_count = dv.getUint16(10, true);
var cd_size = dv.getUint32(12, true);
var cd_off = dv.getUint32(16, true);
if (cd_off < this._pTail) {
this._load(cd_off, this._pTail - cd_off, function() {
this._pTail = cd_off;
this._readCentralDirectory(cd_off, cd_size, cd_count);
});
} else {
this._readCentralDirectory(cd_off, cd_size, cd_count);
}
},
_readCentralDirectory: function(offset, size, count) {
var dv = new this._DataView(this._buf, offset, size);
var p = 0;
for (var i = 0; i < count; i++ ) {
var compMethod = dv.getUint16(p + 10, true);
var uncompSize = dv.getUint32(p + 24, true);
var nameLen = dv.getUint16(p + 28, true);
var extraLen = dv.getUint16(p + 30, true);
var cmtLen = dv.getUint16(p + 32, true);
var off = dv.getUint32(p + 42, true);
p += 46;
var nameView = new this._Uint8Array(this._buf, offset + p, nameLen);
var name = "";
for (var j = 0; j < nameLen; j++) {
name += String.fromCharCode(nameView[j]);
}
p += nameLen + extraLen + cmtLen;
this._files[name] = {off: off, len: uncompSize};
}
if (this._pHead >= this._pTail) {
this._pHead = this._len;
document.dispatchEvent(new CustomEvent("loadProgress", {detail: this._pHead / this._len}));
this._loadNextFrame();
} else {
this._loadNextChunk();
this._loadNextChunk();
}
},
_loadNextChunk: function() {
if (this._pFetch >= this._pTail) {
return;
}
var off = this._pFetch;
var len = this.op.chunkSize;
if (this._pFetch + len > this._pTail) {
len = this._pTail - this._pFetch;
}
this._pFetch += len;
this._load(off, len, function() {
if (off == this._pHead) {
if (this._pNextHead) {
this._pHead = this._pNextHead;
this._pNextHead = 0;
} else {
this._pHead = off + len;
}
if (this._pHead >= this._pTail) {
this._pHead = this._len;
}
document.dispatchEvent(new CustomEvent("loadProgress", {detail: this._pHead / this._len}));
if (!this._loadTimer) {
this._loadNextFrame();
}
} else {
this._pNextHead = off + len;
}
this._loadNextChunk();
});
},
_fileDataStart: function(offset) {
var dv = new DataView(this._buf, offset, 30);
var nameLen = dv.getUint16(26, true);
var extraLen = dv.getUint16(28, true);
return offset + 30 + nameLen + extraLen;
},
_isFileAvailable: function(name) {
var info = this._files[name];
if (!info) {
this._error("File " + name + " not found in ZIP");
}
if (this._pHead < (info.off + 30)) {
return false;
}
return this._pHead >= (this._fileDataStart(info.off) + info.len);
},
_loadNextFrame: function() {
if (this._dead) {
return;
}
var frame = this._loadFrame;
if (frame >= this._frameCount) {
return;
}
var meta = this.op.metadata.frames[frame];
if (!this.op.source) {
// Unpacked mode (individiual frame URLs)
this._loadFrame += 1;
this._loadImage(frame, meta.file, false);
return;
}
if (!this._isFileAvailable(meta.file)) {
return;
}
this._loadFrame += 1;
var off = this._fileDataStart(this._files[meta.file].off);
var end = off + this._files[meta.file].len;
var url;
var mime_type = this.op.metadata.mime_type || "image/png";
if (this._URL) {
var slice;
if (!this._buf.slice) {
slice = new this._ArrayBuffer(this._files[meta.file].len);
var view = new this._Uint8Array(slice);
view.set(this._bytes.subarray(off, end));
} else {
slice = this._buf.slice(off, end);
}
var blob;
try {
blob = new this._Blob([slice], {type: mime_type});
}
catch (err) {
var bb = new this._BlobBuilder();
bb.append(slice);
blob = bb.getBlob();
}
url = this._URL.createObjectURL(blob);
this._loadImage(frame, url, true);
} else {
url = ("data:" + mime_type + ";base64,"
+ base64ArrayBuffer(this._buf, off, end - off));
this._loadImage(frame, url, false);
}
},
_loadImage: function(frame, url, isBlob) {
var _this = this;
var image = new Image();
var meta = this.op.metadata.frames[frame];
image.addEventListener('load', function() {
if (isBlob) {
_this._URL.revokeObjectURL(url);
}
if (_this._dead) {
return;
}
_this._frameImages[frame] = image;
document.dispatchEvent(new CustomEvent("frameLoaded", [frame]));
if (_this._loadingState == 0) {
_this._displayFrame.apply(_this);
}
if (frame >= (_this._frameCount - 1)) {
_this._setLoadingState(2);
_this._buf = null;
_this._bytes = null;
} else {
if (!_this._maxLoadAhead ||
(frame - _this._frame) < _this._maxLoadAhead) {
_this._loadNextFrame();
} else if (!_this._loadTimer) {
_this._loadTimer = setTimeout(function() {
_this._loadTimer = null;
_this._loadNextFrame();
}, 200);
}
}
});
image.src = url;
},
_setLoadingState: function(state) {
if (this._loadingState != state) {
this._loadingState = state;
document.dispatchEvent(new CustomEvent("loadingStateChanged", [state]));
}
},
_displayFrame: function() {
if (this._dead) {
return;
}
var _this = this;
var meta = this.op.metadata.frames[this._frame];
var image = this._frameImages[this._frame];
if (!image) {
this._setLoadingState(0);
return;
}
if (this._loadingState != 2) {
this._setLoadingState(1);
}
if (this.op.autosize) {
if (this._context.canvas.width != image.width || this._context.canvas.height != image.height) {
// make the canvas autosize itself according to the images drawn on it
// should set it once, since we don't have variable sized frames
this._context.canvas.width = image.width;
this._context.canvas.height = image.height;
}
};
this._context.clearRect(0, 0, this.op.canvas.width,
this.op.canvas.height);
this._context.drawImage(image, 0, 0);
document.dispatchEvent(new CustomEvent("frame", { detail: { frame: this._frame, count: this._frameCount } }));
if (!this._paused) {
this._timer = setTimeout(function() {
_this._timer = null;
_this._nextFrame.apply(_this);
}, meta.delay);
}
},
_nextFrame: function(frame) {
if (this._frame >= (this._frameCount - 1)) {
if (this.op.loop) {
this._frame = 0;
} else {
this.pause();
return;
}
} else {
this._frame += 1;
}
this._displayFrame();
},
play: function() {
if (this._dead) {
return;
}
if (this._paused) {
document.dispatchEvent(new CustomEvent("play", [this._frame]));
this._paused = false;
this._displayFrame();
}
},
getCurrentFrame: function() {
return this._frame;
},
getLoadedFrames: function() {
return this._frameImages.length;
},
getFrameCount: function() {
return this._frameCount;
}
}
function base64ArrayBuffer(arrayBuffer, off, byteLength) {
var base64 = '';
var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
var bytes = new Uint8Array(arrayBuffer);
var byteRemainder = byteLength % 3;
var mainLength = off + byteLength - byteRemainder;
var a, b, c, d;
var chunk;
// Main loop deals with bytes in chunks of 3
for (var i = off; i < mainLength; i = i + 3) {
// Combine the three bytes into a single integer
chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
// Use bitmasks to extract 6-bit segments from the triplet
a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
b = (chunk & 258048) >> 12; // 258048 = (2^6 - 1) << 12
c = (chunk & 4032) >> 6; // 4032 = (2^6 - 1) << 6
d = chunk & 63; // 63 = 2^6 - 1
// Convert the raw binary segments to the appropriate ASCII encoding
base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
}
// Deal with the remaining bytes and padding
if (byteRemainder == 1) {
chunk = bytes[mainLength];
a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
// Set the 4 least significant bits to zero
b = (chunk & 3) << 4; // 3 = 2^2 - 1
base64 += encodings[a] + encodings[b] + '==';
} else if (byteRemainder == 2) {
chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
b = (chunk & 1008) >> 4; // 1008 = (2^6 - 1) << 4
// Set the 2 least significant bits to zero
c = (chunk & 15) << 2; // 15 = 2^4 - 1
base64 += encodings[a] + encodings[b] + encodings[c] + '=';
}
return base64;
}
})();