<template>
<div>
<life-navbar title="下载图片zip文件" />
<van-button type="danger" @click="getImgUrl">下载</van-button>
<van-button type="danger" @click="getCanvas">生成图片</van-button>
<div class="imgtowrapper" ref="imgwrapper">
<p>这是一个p标签</p> <p>这是个啥</p>
</div>
<img style="width:100%" :src="imgSrc" alt="" />
</div>
</template>
<script>
import { LifeNavbar } from 'ytlife-ui';
import JSZip from 'jszip';
import { saveAs } from 'file-saver';
import html2canvas from 'html2canvas';
export default {
components: {
LifeNavbar,
},
data() {
return {
imgSrc: '',
};
},
methods: {
getImgUrl() {
let a =
'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2626209138,2760863424&fm=26&gp=0.jpg';
// let b = [
// 'https://img3.doubanio.com/view/ark_article_cover/retina/public/146835273.jpg?v=1590110332',
// ];
// let imgList = Array.prototype.concat(a, b);
let img = new Image();
img.crossOrigin = 'Anonymous';
img.src = a;
// img.onload = () => {
let canvas = document.createElement('canvas');
canvas.width = 50;
canvas.height = 50;
let ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let dataURL = canvas.toDataURL();
console.log(dataURL);
// console.log(dataURL, 'dataURL');
// let zip = new JSZip();
// // zip.file('1', dataURL);
// let imgzip = zip.folder('images');
// imgzip.file('smile.jpg', dataURL);
// console.log(zip);
// zip.generateAsync({ type: 'blob' }).then(data => {
// saveAs(data, 'zipName.zip');
// });
// console.log(zip, 'ziip');
// };
let zip = new JSZip();
// zip.file('Hello.txt', 'Hello World\n');
let imgzip = zip.folder('images');
imgzip.file('smile.jpg', dataURL, { base64: true });
zip.generateAsync({ type: 'blob' }).then(data => {
saveAs(data, 'test.zip');
});
},
downLoadZip() {},
async getCanvas() {
let canvas = await html2canvas(this.$refs.imgwrapper);
let dataURL = canvas.toDataURL('image/png');
this.imgSrc = dataURL;
let zip = new JSZip();
zip.file('test.png', dataURL);
// let imgzip = zip.folder('images');
// imgzip.file('smile.jpg', dataURL);
zip.generateAsync({ type: 'blob' }).then(data => {
console.log(data, 'data');
saveAs(data, 'test.zip');
});
// saveAs(dataURL, 'img.jpg');
},
},
};
</script>
<style lang="scss" scoped>
p {
text-align: center;
margin: 10px;
}
</style>
