So I'm using JSZip
to create a zip file from a webpage (technically an HTML email). I host the email so CORS issue to that URL is not a problem, but I need to download all the images in the email and save them to a .zip
... the kicker is these images can live anywhere on the internet.
The Need:
I need to loop over images in the requested HTML and get their data and add them to the ZIP.
What I'm doing:
Since I can get the html data via $.ajax
and store it as a jQuery object I technically loop through the images and replace their URLs in the email. While I'm doing this, I'd like to just pull the binary data that JSZip requires so I can add them to the ZIP file. JSZip Documentation
The Problems
- I can't get the Binary data from the jQuery objects as a workaround. No idea how to do this
- If I loop through a list of external URLs then more CORS problems
The Code
$.ajax({
url: 'https"//URLToMyWebpage.com',
type: 'GET',
data: ({
csrf_token: getCsrfToken(),
}),
success: function (emailHTML) {
var imageArray=[];
var emailZip = new JSZip();
var fileDirectory = emailZip.folder("email_6509_files");
var $emailHtml = $(emailHTML);
$emailHtml.find('img').each(function(){
const $this = $(this);
const imageURL = $(this).attr('src');
const imageFileName = imageURL.replace(/^.*[\/]/, '');
imageArray.push(imageURL);
emailHTML = emailHTML.replace(imageURL,'/email_6509_files/'+imageFileName);
});
emailZip.file("email_6509.html", emailHTML);
emailZip
.generateAsync({type:"blob"})
.then(function(content) {
saveAs(content, "email_6509.zip");
});
}
});
Any ideas appreciated!
question from:
https://stackoverflow.com/questions/65893239/get-binary-or-base64-image-data-from-jquery-object-for-saving-as-zip 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…