网页中提取webp转JPG
// ==UserScript==
// @name WebP转JPG转换器
// @namespace http://tampermonkey.net/
// @version 2.0
// @description 网页中提取webp转JPG
// @author 黎曼
// @match *://*/*
// @grant GM_log
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const corsProxies = [
'https://api.allorigins.win/raw?url=',
'https://cors-anywhere.herokuapp.com/',
];
// 使用所有代理来尝试转换WebP图像为JPG
function convertWebPToJPGAndDownload(url) {
console.log('开始尝试多个代理:', url); // 调试信息
const requests = corsProxies.map(proxy => {
return new Promise((resolve, reject) => {
let img = new Image();
img.crossOrigin = 'Anonymous'; // 处理CORS问题
img.onload = function() {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
let jpgDataUrl = canvas.toDataURL('image/jpeg');
resolve(jpgDataUrl);
};
img.onerror = function() {
reject('代理失败: ' + proxy);
};
img.src = proxy + url;
});
});
Promise.allSettled(requests)
.then(results => {
const successResult = results.find(result => result.status === 'fulfilled');
if (successResult) {
console.log('成功转换图像'); // 调试信息
let link = document.createElement('a');
link.href = successResult.value;
link.download = 'converted-image.jpg';
link.style.display = 'none'; // 隐藏链接
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
const errors = results.filter(result => result.status === 'rejected').map(result => result.reason);
GM_log('所有代理均失败: ' + errors.join(', '));
}
})
.catch(error => {
GM_log('处理请求时发生错误: ' + error);
});
}
// 创建并添加浮动面板，列出WebP图像
function createFloatingPanel() {
let panel = document.createElement('div');
panel.style.position = 'fixed';
panel.style.top = '10px';
panel.style.right = '10px';
panel.style.zIndex = 10000;
panel.style.padding = '10px';
panel.style.backgroundColor = 'white';
panel.style.border = '1px solid black';
panel.style.maxHeight = '90vh';
panel.style.overflowY = 'auto';
panel.style.width = '300px';
let header = document.createElement('h3');
header.innerText = 'WebP 图像';
panel.appendChild(header);
document.body.appendChild(panel);
return panel;
}
// 将图像URL及其缩略图添加到浮动面板
function addImageToPanel(panel, img) {
let container = document.createElement('div');
container.style.marginBottom = '10px';
container.style.display = 'flex';
container.style.alignItems = 'center';
let thumbnail = document.createElement('img');
thumbnail.src = img.src;
thumbnail.style.width = '50px';
thumbnail.style.height = '50px';
thumbnail.style.objectFit = 'cover';
thumbnail.style.marginRight = '10px';
let imgLink = document.createElement('a');
imgLink.href = img.src;
imgLink.innerText = img.src;
imgLink.target = '_blank';
imgLink.style.display = 'block';
imgLink.style.flexGrow = '1';
imgLink.style.overflow = 'hidden';
imgLink.style.textOverflow = 'ellipsis';
imgLink.style.whiteSpace = 'nowrap';
imgLink.style.marginRight = '10px';
let downloadButton = document.createElement('button');
downloadButton.innerText = '下载为JPG';
downloadButton.style.flexShrink = '0';
downloadButton.addEventListener('click', function(event) {
event.stopPropagation();
event.preventDefault();
convertWebPToJPGAndDownload(img.src);
});
container.appendChild(thumbnail);
container.appendChild(imgLink);
container.appendChild(downloadButton);
panel.appendChild(container);
}
// 查找所有WebP图像并在浮动面板中显示
function findWebPImages() {
let panel = createFloatingPanel();
let images = document.querySelectorAll('img');
console.log('找到的图像数量:', images.length); // 调试信息
images.forEach((img) => {
if (img.src.endsWith('.webp')) {
addImageToPanel(panel, img);
}
});
}
// 创建并添加显示图像的按钮
function addShowImagesButton() {
let button = document.createElement('button');
button.innerText = '显示WebP图像';
button.style.position = 'fixed';
button.style.top = '10px';
button.style.right = '10px';
button.style.zIndex = '1000';
button.style.padding = '10px';
button.style.backgroundColor = 'red';
button.style.color = 'white';
button.style.border = 'none';
button.style.borderRadius = '5px';
button.style.cursor = 'pointer';
button.addEventListener('click', findWebPImages);
document.body.appendChild(button);
}
// 页面加载时添加显示图像按钮
window.addEventListener('load', addShowImagesButton);
})();