sawa
sawa

Reputation: 2050

Javascript blob to image converting with JSZip

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?

Upvotes: 3

Views: 3447

Answers (2)

Hakan
Hakan

Reputation: 599

JSZip as of v3 supports blob as file content.

Usage:
zip.file("image.png", blob); 

Upvotes: 0

David Duponchel
David Duponchel

Reputation: 4069

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)
});

Upvotes: 5

Related Questions