new Vue({
el: "#app",
data: {
urls: [
"https://loremflickr.com/320/240/dog",
"https://loremflickr.com/320/240/cat"
],
images: [],
},
computed: {},
methods: {
load() {
const task = this.urls.map(v => next => {
const image = new Image();
image.crossOrigin = '';
image.onload = function(img) {
let canvas = document.createElement("canvas");
let context = canvas.getContext('2d');
context.drawImage(this, 0, 0, this.width, this.height);
next(null, {
filename: v.split('/').pop(),
canvas,
data: canvas.toDataURL(),
});
}
image.src = v;
});
window.async.series(task, (err, res) => {
this.images = res;
});
},
click() {
const zip = new window.JSZip();
const img = zip.folder("images");
const task = this.images.map(v => next => {
v.canvas.toBlob((blob) => {
next(null, {
filename: v.filename,
data: blob,
});
}, 'image/jpeg', 80);
});
window.async.series(task, (err, res) => {
res.forEach(v => {
img.file(v.filename + '.jpg', v.data);
})
zip.generateAsync({ type: "base64"})
.then(function(base64) {
const element = document.createElement('a');
element.setAttribute('href', "data:application/zip;base64," + base64);
element.setAttribute('download', "sample.zip");
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
});
})
}
},
mounted() {
this.load();
}
})