Grab all the images and put them in a zip script src https cdnjs cloudflare com ajax libs jszip 3 6 0 jszip min js script script async console log starting image zipping let imgurls https i imgur com kXVj1yL png let imgurls https i imgur com kXVj1yL png https i imgur com Ib3e3QF png https i imgur com vCMFOYO png https i imgur com L00TPQY png https i imgur com fCuMUYl png https i imgur com 7vIDXTP png https i imgur com VvrMj0D png https i imgur com vRMYNNE png https i imgur com EjtP6R3 png https i imgur com aAeDMyh png https i imgur com LcTFZ5s png https i imgur com EBx0U5Y png https i imgur com ssuQSoT png https i imgur com nuCJzwV png https i imgur com Yne50kv png https i imgur com PIix0NG png https i imgur com m3LNVGe png https i imgur com GEwk2U0 png https i imgur com 3aJTatD png https i imgur com yIXEmyP png https i imgur com vuNdSGM png https i imgur com rkU4j3B png https i imgur com 8ovc5tf png https i imgur com UoCPCIV png https i imgur com COuUhsn png https i imgur com xUbNxXZ png let myzip new JSZip console log created myzip myzip for let i 0 i imgurls length i const imgurl imgurls i const img document createElement img img crossOrigin anonymous img src imgurl await img decode wait for it to finish loading let canvas document createElement canvas let context canvas getContext 2d canvas height img naturalHeight canvas width img naturalWidth context drawImage img 0 0 let imgdata canvas toDataURL image png alt jpeg let imgfilename imgurl split pop console log processed image imgfilename You re generating a data uri which has schema mime type etc before the actual base64 data data MIME type charset encoding base64 data You ll have to remove all the content before the data then use it myzip file imgfilename imgdata substr imgdata indexOf 1 base64 true console log creating zip let content await myzip generateAsync type blob var a document createElement a document body appendChild a a id downloadlink a style position absolute a style bottom 20px a style left 10px a innerHTML Click to Download Zip var file new Blob content type octet stream a href URL createObjectURL file a download images zip a style font size 20pt console log ready script
ument createElement img img crossOrigin anonymous img src imgurl await img decode wait for it to finish loading let canvas document createElement canvas let context canvas getContext 2d canvas height img naturalHeight canvas width img naturalWidth context drawImage img 0 0 let imgdata canvas toDataURL image png alt jpeg let imgfilename imgurl split pop console log processed image imgfilename You re generating a data uri which has schema mime type etc before the actual base64 data data MIME type charset encoding base64 data You ll have to remove all the content before the data then use it myzip file imgfilename imgdata substr imgdata indexOf 1 base64 true console log creating zip let content await myzip generateAsync type blob var a document createElement a document body appendChild a a id downloadlink a style position absolute a style bottom 20px a style left 10px a innerHTML Click to Download Zip var file new Blob content type octet stream a href URL createObjectURL file a download images zip a style font size 20pt console log ready script