node.js - Javascript JSZip having error after adding image

Question

I would like to download some a tampermonkey script that help me download images from a website and then packed as a zip file for me to download. I used JSZip for packing the images.

I have no problem following the sample code but when an image is added, then I would get the following error:

UnhandledPromiseRejectionWarning: Error: Invalid base64 input, it looks like a data url.

I placed my code in Runkit, if line 19 is commented (didn't add the downloaded image into the zip file) everything will run smoothly. I am not sure how could I could add the image into the zip file.

Thanks in advance

question from:https://stackoverflow.com/questions/65929423/javascript-jszip-having-error-after-adding-image

Answer 1

The root cause of the problem is the downloaded image didn't follow the base64 requirement. There is nothing wrong with the JSZip part.

Here are different ways to download the image properly:

Node

I managed to replace the image downloading library from request to node-base64-image and everything is working now. I guess you can still use request but need to tune the parameters in order to get that work. Here is the working Runkit. So in conclusion the problem is on download side.

Browser

As I want to download the image from the using a browser script (tampermonkey) so the node solution doesn't fit me. After searching a bit I find a working solution:

        GM_xmlhttpRequest({
            method: "GET",
            url: url,
            headers: { referer: url, origin: url },
            responseType: 'blob',
            onload: response => {
                // Here the response.response would be the image that works for JSZip
            }
        });