要使用这段代码请使用油猴脚本,或者任何js代码注入的 浏览器插件
<>> //导入 JSZip v3.6.0 //导入filesave.js V2.0.5 <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> 最好直接复制代码到page func 上面 //page func $(document).ready(function() { // 添加 CSS 样式 var buttonStyle = { position: 'fixed', bottom: '120px', right: '20px', zIndex: 100, padding: '10px 20px', backgroundColor: '#069', color: '#fff', border: 'none', borderRadius: '5px', cursor: 'pointer' }; // 创建固定的下载按钮并应用样式 var downloadButton = $('<button id="downloadButton">DL Imgs</button>').css(buttonStyle); $('body').append(downloadButton); // 点击按钮触发下载图片事件 $("#downloadButton").click(function() { // 获取页面内所有图片 var $images = $("img"); // 创建一个用于存储筛选后的图片的数组 var filteredImages = []; // 筛选出宽度和高度都大于200px的图片 $images.each(function() { var width = $(this).width(); var height = $(this).height(); if (width > 200 && height > 200) { filteredImages.push($(this).attr("src")); } }); // 下载筛选后的图片 downloadImages(filteredImages); }); // 下载图片函数 function downloadImages(images) { // 创建一个 JSZip 实例 var zip = new JSZip(); var promises = []; // 遍历图片数组,为每张图片添加到压缩文件中 images.forEach(function(imageUrl, index) { var filename = 'image_' + index + imageUrl.substring(imageUrl.lastIndexOf('.')); var deferred = $.Deferred(); var img = new Image(); // 图片加载完成后将其转换为 Blob 对象并添加到压缩文件中 img.onload = function() { var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height); canvas.toBlob(function(blob) { zip.file(filename, blob); deferred.resolve(); }); }; img.src = imageUrl; promises.push(deferred.promise()); }); // 当所有图片加载完成后生成并下载压缩文件 $.when.apply($, promises).then(function() { zip.generateAsync({type:"blob"}).then(function(content) { // 使用 FileSaver.js 将 Blob 下载为文件 saveAs(content, "images.zip"); }); }); } });