0

I am trying to download different sections of a page as jpeg. There are two ways I'm going about it; One is to include a download button in every section and when it is clicked, the section is downloaded as jpeg; The other is to include a button atop the page and when it is clicked, all the sections are downloaded.

The download section by section code works well but the issue arises when I try to do the download all option, It downloads files of type file instead of jpeg pictures.

When I logged the url I'm supposed to download from, I find out that it is empty but it isn't inside the html2canvas function.

I am using html2canvas to convert html to canvas and JSZip to zip it.

function urlToPromise(url) {
        return new Promise(function(resolve, reject) {
            JSZipUtils.getBinaryContent(url, function (err, data) {
                if(err) {
                    reject(err);
                } else {
                    resolve(data);
                    console.log(data);
                }
            });
        });
    }

    function getScreen(){
        var caption = $('#caption-input').val();
        var allSections = $("#content").children().unbind();
        var allSectionsArray = $.makeArray(allSections);
        console.log(allSectionsArray);
        var zip = new JSZip(); //Instantiate zip file
        var url = "";
        for(var i = 0; i < allSectionsArray.length; i++){
            console.log("Currently at " + allSectionsArray[i].id);
            var queryId = allSectionsArray[i].id.toString();    

       html2canvas(document.querySelector("#"+queryId)).then(function(canvas) {
                $("#blank").attr('href',canvas.toDataURL('image/jpeg', 1.0));
                $("#blank").attr('download',caption + ".jpeg");
                //$("#blank")[0].click();

                url = $("#blank").attr('href');
                console.log(url);        
            });
            console.log(url);
            var filename = "image " + (i+1);
            zip.file(filename, urlToPromise(url),{binary:true}); //Create new zip file with filename and content
            console.log('file ' + (i+1) + ' generated');
            console.log(filename+ "\n" + url);
        }

        //Generate zip file
        generateZipFile(zip);
    } 

    function generateZipFile(zip){
        zip.generateAsync({type:"blob"})
            .then(function callback(blob) {
            saveAs(blob, "example.zip");
            console.log("zip generated");
        });
    }
Oladimeji Oladoyin
  • 51
  • 10
  • Regarding file extension you missed it in this line `var filename = "image " + (i+1);`. You can add extension to it. – Panther Jan 29 '19 at 09:44
  • But i'm not sure if your `JSZipUtils.getBinaryContent` will get the image content as the url passed is a `dataURI` and im not sure if it would get converted. let me know if that works – Panther Jan 29 '19 at 09:45
  • @Panther thank you for the reply. I added the file extension as you suggested and it now shows as .jpeg file but when I open it, it tells me **Invalid Image** – Oladimeji Oladoyin Jan 29 '19 at 09:53
  • @Panther the `JSZipUtils.getBinaryContent` is supposed to get the image content from the `dataURI` or am I mistaken? – Oladimeji Oladoyin Jan 29 '19 at 09:56
  • @Panther I also noticed that the dataURIs are generated after the files and zip have been generated. Which doesn't make sense because there'd be no content. – Oladimeji Oladoyin Jan 29 '19 at 10:12
  • I dn think it works with `dataURI`. however you can try other methods to convert canvas to binary as shown here https://stackoverflow.com/questions/42800419/converting-html-canvas-to-binary-image-datahttps://stackoverflow.com/questions/42800419/converting-html-canvas-to-binary-image-data – Panther Jan 29 '19 at 10:12
  • `urlToPromise` returns a promise. So you have to wait until the promise is resolved before writing the file. – Panther Jan 29 '19 at 10:13
  • @Panther I still couldn't get it to work. If I generated the zip file inside the `html2canvas` method, it generates a zip file each time for a file but at least the jpeg files are correct and display properly. Which means there's a problem with when the `generateZipAsync` method is called. Could you show me how I can make the `generateZipAsync` method to wait for all the files to completely generated first? – Oladimeji Oladoyin Jan 29 '19 at 13:47

0 Answers0