Active member
- Joined
- Nov 24, 2024
- Messages
- 50
Open console. Control+Shift+I. Paste this command first. You will see " JSZip loaded " in console.
After that paste the second command. Do this until you get all blobs.
JavaScript:
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
script.onload = () => console.log('JSZip loaded');
document.head.appendChild(script);
JavaScript:
const zip = new JSZip();
const blobCounts = {};
const processedBlobs = new Set();
function downloadBlobAsPng(blobUrl, parentDivId, index) {
return fetch(blobUrl)
.then(response => response.blob())
.then(blob => {
return new Promise(resolve => {
const url = URL.createObjectURL(blob);
const image = new Image();
image.src = url;
image.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
canvas.toBlob(pngBlob => {
const fileName = `${parentDivId}-${index}.png`;
zip.file(fileName, pngBlob);
resolve();
URL.revokeObjectURL(url);
}, 'image/png');
};
image.onerror = () => {
resolve();
URL.revokeObjectURL(url);
};
});
})
.catch(err => {
console.error(`Error fetching blob for ${parentDivId}-${index}:`, err);
});
}
function processImages() {
const images = Array.from(document.querySelectorAll('img[src^="blob:"]'));
const promises = images.map((img) => {
if (processedBlobs.has(img.src)) return Promise.resolve();
const parentDiv = img.closest('div[id^="content-p"]');
const parentDivId = parentDiv ? parentDiv.id : 'unknown';
if (!blobCounts[parentDivId]) {
blobCounts[parentDivId] = 0;
}
blobCounts[parentDivId] += 1;
processedBlobs.add(img.src);
return downloadBlobAsPng(img.src, parentDivId, blobCounts[parentDivId]);
});
return Promise.all(promises).then(() => {
console.log(`Processed ${processedBlobs.size} blobs.`);
});
}
processImages().then(() => {
zip.generateAsync({ type: 'blob' }).then(content => {
const a = document.createElement('a');
const url = URL.createObjectURL(content);
a.href = url;
a.download = 'images.zip';
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(url);
});
});
const observer = new MutationObserver(() => processImages());
observer.observe(document.body, { childList: true, subtree: true });
Last edited:
