控制台调用函数的形式触发
window.dimg('壁纸')
效果
其中 文件名主体是url图片名
js代码
获取所有的img标签 特定图片url有统一url 借此筛选
点击查看代码
// 下载图片
/*
* imgsrc 图片地址
* name 图片下载后的名字【包含图片后缀】 如"a.jpg"
*/
function downloadIamge(imgsrc, name) {
//下载图片地址和图片名
var image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
}
function urlGetFileName (url) {
return url.substring(url.lastIndexOf("/")+1,url.length)
}
function dimg (dimg){
let imgs = Array.from(document.querySelectorAll('img')).filter((node) => { return node.src.includes('imgur') })
imgs.forEach((node)=>downloadIamge(node.src,dimg+'_'+urlGetFileName(node.src)))
return '图片数'+imgs.length
}
油猴代码
变动处，函数定义在内部，需要window.赋值到公共空间
代码只在部分网站使用 @match 参数意义*://*/forum/*
*://代表所有协议 实际就是为了包含https 和http
*/ 代表所有主机 本来应该是确定的域名比如bilibili 但小网站域名变动，这里不确定
forum/* 是唯一筛选的 所有form开头的url路径
点击查看代码
// ==UserScript==
// @name 下载图片
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match *://*/forum/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant none
// ==/UserScript==
(function() {
// 下载图片
/*
* imgsrc 图片地址
* name 图片下载后的名字【包含图片后缀】 如"a.jpg"
*/
function downloadIamge(imgsrc, name) {
//下载图片地址和图片名
var image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
}
function urlGetFileName (url) {
return url.substring(url.lastIndexOf("/")+1,url.length)
}
function dimg (dimg){
let imgs = Array.from(document.querySelectorAll('img')).filter((node) => { return node.src.includes('imgur') })
imgs.forEach((node)=>downloadIamge(node.src,dimg+'_'+urlGetFileName(node.src)))
return '图片数'+imgs.length
}
window.dimg=dimg
// Your code here...
})();