Javascript blob to image converting with JSZip

Question

var bl = window.URL.createObjectURL(xhr.response)

var zip = new JSZip();
zip.file(bl);

zip.generateAsync({type:"blob"})
.then(function(content) {
    saveAs(content, "example.zip");

}, function(err){
    console.log(err)
})

My XmlHttpRequest got a response of the type 'blob' from an image file. How can I convert the blob image file to an image file (could be .gif, .jpg, .bmp, .jpg-large, etc.) so that I can make a zip file without errors?

Answer 1

With URL.createObjectURL you get the url of the blob (blob:https://stackoverflow.com/e62c177a-b4b1-4945-8e13-53bb5a3c8f34 for example). JSZip doesn't resolve it but you can use the blob (so xhr.response in your case) directly. As Patrick Evans said in a comment, you also need to give the file name.

var zip = new JSZip();
zip.file("my_file.ext", xhr.response);

zip.generateAsync({type:"blob"})
.then(function(content) {
    saveAs(content, "example.zip");
}, function(err){
    console.log(err)
});