Greasy Fork

Greasy Fork is available in English.

站酷网添加图片下载按钮

添加下载按钮

当前为 2019-08-09 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         站酷网添加图片下载按钮
// @namespace    http://greasyfork.icu/zh-CN/users/193133-pana
// @version      1.0.0
// @description  添加下载按钮
// @author       pana
// @include      http*://www.zcool.com.cn/work/*
// @grant        none
// @require      https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.min.js
// @require      http://greasyfork.icu/scripts/376157-downloadpic-js/code/downloadPicjs.js?version=658364
// ==/UserScript==

(function() {
	'use strict';
	const zcoolValue = {
		groupReg: /^(http:|https:)?\/\/img\.zcool\.cn\/[0-9a-z\/\-_.]+\.(jpg|jpeg|png|bmp|gif)/i,
		downloadBtn: {
			iconUrl: 'url(https://static.hellorf.com/v180817115700/hellorf/images/iconpic-r-cache-hover.svg)',
			backgroundColor: {
				mouseleave: 'rgba(0, 0, 0, 0.5)',
				mouseenter: 'rgba(0, 0, 0, 0.8)'
			}
		},
		downloadAllBtn: {
			backgroundImage: {
				mouseleave: 'url(https://static.hellorf.com/v180817115700/hellorf/images/iconpic-r-cache.svg)',
				mouseenter: 'url(https://static.hellorf.com/v180817115700/hellorf/images/iconpic-r-cache-hover.svg)'
			},
			backgroundColor: {
				mouseleave: '#eee',
				mouseenter: '#ea4335'
			},
			backgroundPosition: {
				mouseleave: '10px center',
				mouseenter: '74px center'
			},
			width: {
				mouseleave: '36px',
				mouseenter: '100px'
			},
			text: {
				mouseleave: '',
				mouseenter: '下载全部'
			}
		},
		progressBtn: {
			backgroundColor: {
				mouseleave: '#eee',
				mouseenter: '#ea4335'
			},
			width: {
				mouseleave: '36px',
				mouseenter: '100px'
			},
			textColor: {
				mouseleave: '#818181',
				mouseenter: '#fff'
			},
			text: {
				mouseleave: '',
				mouseenter: '下载进度:'
			}
		}
	};

	function updateProgress(countNum, percentComplete) {
		$(downloadPic.downloadBtn.jQuerySelector).eq(countNum).text(downloadPic.downloadBtn.text + downloadPic.textDownload.startStr + percentComplete + downloadPic.textDownload.percentEndStr)
	}
	function transferComplete(countNum, allStatus) {
		$(downloadPic.downloadBtn.jQuerySelector).eq(countNum).text(downloadPic.downloadBtn.text + downloadPic.textDownload.finishStr).attr('title', downloadPic.downloadBtn.finishTitle);
		downloadPic.numberOfDownload.downloadCurrentNum++;
		$('p#progressBtn').text(downloadPic.numberOfDownload.downloadCurrentNum + downloadPic.textProgress.divideStr + downloadPic.numberOfDownload.downloadTotalNum);
		if (allStatus === 1) {
			downloadPic.numberOfDownload.currentNum++;
			if (downloadPic.numberOfDownload.currentNum === downloadPic.numberOfDownload.totalNum) {
				$(downloadPic.downloadAllBtn.jQuerySelector).attr("title", downloadPic.downloadAllBtn.finishTitle)
			}
		}
	}
	function readFile(imgSrc, count, allStatus) {
		$(downloadPic.downloadBtn.jQuerySelector).eq(count).text(downloadPic.downloadBtn.text + downloadPic.textDownload.dotStr);
		downloadPic.numberOfDownload.downloadTotalNum++;
		$("p#progressBtn").text(downloadPic.numberOfDownload.downloadCurrentNum + downloadPic.textProgress.divideStr + downloadPic.numberOfDownload.downloadTotalNum);
		downloadPic.downloadFile(imgSrc, count, allStatus, updateProgress, transferComplete, saveAs)
	}
	function addDownloadBtn(container, count) {
		let workImgSrc = container.attr('src');
		workImgSrc = zcoolValue.groupReg.exec(workImgSrc)[0];
		container.after(downloadPic.downloadBtn.tag);
		container.parent().css({
			'position': 'relative'
		});
		$(downloadPic.downloadBtn.jQuerySelector).eq(count).text(downloadPic.downloadBtn.text).css({
			'position': 'absolute',
			'top': '30px',
			'left': '30px',
			'display': 'block',
			'border-radius': '4px',
			'text-align': 'center',
			'vertical-align': 'middle',
			'zoom': '1',
			'padding-left': '36px',
			'padding-right': '12px',
			'height': '28px',
			'color': '#fff',
			'font-size': '12px',
			'line-height': '28px',
			'background-color': zcoolValue.downloadBtn.backgroundColor.mouseleave,
			'background-image': zcoolValue.downloadBtn.iconUrl,
			'background-repeat': 'no-repeat',
			'background-position': '13px center',
			'background-size': '16px 14px'
		}).hover(function() {
			$(this).css({
				'background-color': zcoolValue.downloadBtn.backgroundColor.mouseenter
			})
		}, function() {
			$(this).css({
				'background-color': zcoolValue.downloadBtn.backgroundColor.mouseleave
			})
		}).on('click', function() {
			readFile(workImgSrc, count, 0)
		})
	}
	function addDownloadAllBtn(container) {
		container.after(downloadPic.downloadAllBtn.tag);
		$(downloadPic.downloadAllBtn.jQuerySelector).text(zcoolValue.downloadAllBtn.text.mouseleave).css({
			'position': 'fixed',
			'display': 'block',
			'width': zcoolValue.downloadAllBtn.width.mouseleave,
			'height': '36px',
			'right': '15px',
			'bottom': '106px',
			'background-image': zcoolValue.downloadAllBtn.backgroundImage.mouseleave,
			'background-size': '16px auto',
			'background-repeat': 'no-repeat',
			'background-position': zcoolValue.downloadAllBtn.backgroundPosition.mouseleave,
			'background-color': zcoolValue.downloadAllBtn.backgroundColor.mouseleave,
			'border-radius': '4px',
			'text-indent': '-26px',
			'font-size': '12px',
			'line-height': '36px',
			'text-align': 'center',
			'color': '#fff',
			'z-index': '9999'
		}).hover(function() {
			$(this).css({
				'width': zcoolValue.downloadAllBtn.width.mouseenter,
				'background-image': zcoolValue.downloadAllBtn.backgroundImage.mouseenter,
				'background-color': zcoolValue.downloadAllBtn.backgroundColor.mouseenter,
				'background-position': zcoolValue.downloadAllBtn.backgroundPosition.mouseenter,
			});
			$(this).text(zcoolValue.downloadAllBtn.text.mouseenter)
		}, function() {
			$(this).css({
				'width': zcoolValue.downloadAllBtn.width.mouseleave,
				'background-image': zcoolValue.downloadAllBtn.backgroundImage.mouseleave,
				'background-color': zcoolValue.downloadAllBtn.backgroundColor.mouseleave,
				'background-position': zcoolValue.downloadAllBtn.backgroundPosition.mouseleave,
			});
			$(this).text(zcoolValue.downloadAllBtn.text.mouseleave)
		}).on('click', function() {
			let totalWorkImgGroup = $("div.work-show-box img");
			downloadPic.numberOfDownload.currentNum = 0;
			downloadPic.numberOfDownload.totalNum = totalWorkImgGroup.length;
			let eachWorkImgSrc;
			for (let j = 0; j < totalWorkImgGroup.length; j++) {
				eachWorkImgSrc = totalWorkImgGroup.eq(j).attr('src');
				eachWorkImgSrc = zcoolValue.groupReg.exec(eachWorkImgSrc)[0];
				readFile(eachWorkImgSrc, j, 1)
			}
		})
	}
	let workImgGroup = $("div.work-show-box img");
	for (let i = 0; i < workImgGroup.length; i++) {
		addDownloadBtn(workImgGroup.eq(i), i)
	}
	addDownloadAllBtn($("div.work-content-wrap"));
	let progress_btn = '<div id="divProgress"><p id="progressText"></p><p id="progressBtn">' + downloadPic.numberOfDownload.downloadCurrentNum + downloadPic.textProgress.divideStr + downloadPic.numberOfDownload.downloadTotalNum + '</p></div>';
	$("div.details-fixed-wrap").after(progress_btn);
	$("p#progressText").css({
		'text-align': 'center',
		'display': 'inline'
	});
	$("p#progressBtn").css({
		'text-align': 'center',
		'display': 'inline'
	});
	$("div#divProgress").css({
		'position': 'fixed',
		'display': 'block',
		'width': zcoolValue.progressBtn.width.mouseleave,
		'height': '36px',
		'right': '15px',
		'bottom': '60px',
		'background-color': zcoolValue.progressBtn.backgroundColor.mouseleave,
		'border-radius': '4px',
		'font-size': '12px',
		'line-height': '36px',
		'text-align': 'center',
		'color': zcoolValue.progressBtn.textColor.mouseleave,
		'z-index': '9999'
	}).hover(function() {
		$(this).css({
			'width': zcoolValue.progressBtn.width.mouseenter,
			'color': zcoolValue.progressBtn.textColor.mouseenter,
			'background-color': zcoolValue.progressBtn.backgroundColor.mouseenter
		});
		$("p#progressText").text(zcoolValue.progressBtn.text.mouseenter)
	}, function() {
		$(this).css({
			'width': zcoolValue.progressBtn.width.mouseleave,
			'color': zcoolValue.progressBtn.textColor.mouseleave,
			'background-color': zcoolValue.progressBtn.backgroundColor.mouseleave
		});
		$("p#progressText").text(zcoolValue.progressBtn.text.mouseleave)
	});
	let laypage_next = $("a.laypage_next");
	if (laypage_next.length !== 0) {
		let aNextPage = '<a id="aNextPage"></a>';
		$("div.work-center-con").append(aNextPage);
		$("a#aNextPage").css({
			'display': 'inline-block',
			'width': '52px',
			'height': '52px',
			'position': 'fixed',
			'text-decoration': 'underline',
			'float': 'right',
			'right': '0',
			'top': '50%',
			'color': '#474747',
			'background': 'url(https://tu.heiguang.com/img/common/bg.png) no-repeat',
			'background-color': '#f6f6f6',
			'background-position': '-85px -294px',
			'z-index': '4',
			'border-radius': '6px'
		}).hover(function() {
			$(this).css({
				'background-position': '-85px -338px',
				'background-color': '#c2c2c2'
			})
		}, function() {
			$(this).css({
				'background-position': '-85px -294px',
				'background-color': '#f6f6f6'
			})
		}).attr('href', laypage_next.attr("href")).attr('title', '下一页')
	}
	let laypage_prev = $("a.laypage_prev");
	if (laypage_prev.length !== 0) {
		let aPrevPage = '<a id="aPrevPage"></a>';
		$("div.work-center-con").append(aPrevPage);
		$("a#aPrevPage").css({
			'display': 'inline-block',
			'width': '52px',
			'height': '52px',
			'position': 'fixed',
			'text-decoration': 'underline',
			'float': 'left',
			'left': '0',
			'top': '50%',
			'color': '#474747',
			'background': 'url(https://tu.heiguang.com/img/common/bg.png) no-repeat',
			'background-color': '#f6f6f6',
			'background-position': '-30px -294px',
			'z-index': '4',
			'border-radius': '6px'
		}).hover(function() {
			$(this).css({
				'background-position': '-30px -338px',
				'background-color': '#c2c2c2'
			})
		}, function() {
			$(this).css({
				'background-position': '-30px -294px',
				'background-color': '#f6f6f6'
			})
		}).attr('href', laypage_prev.attr("href")).attr('title', '上一页')
	}
})();