前端图片压缩

最新推荐文章于 2024-09-02 21:20:49 发布

xiaohuihui_z

最新推荐文章于 2024-09-02 21:20:49 发布

阅读量513

点赞数

分类专栏： vue 文章标签：前端 javascript vue.js

原文链接：https://blog.csdn.net/weixin_52004060/article/details/121386805

版权

vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何利用JavaScript的JSZip库和FileSaver.js插件，将一组网络图片下载并压缩成ZIP文件。首先安装必要的依赖，然后通过循环遍历图片列表，获取每张图片的Base64编码，将其保存到ZIP文件的images文件夹中，最后生成ZIP文件并提供下载。整个过程涉及图片跨域处理、Base64转换及文件保存。

摘要由CSDN通过智能技术生成

1、首先安装node_module插件

npm i jszip file-saver

2、导入插件

import { saveAs } from ‘file-saver’;

import JSZip from ‘jszip’
3、代码实现
created(){
let arr = [{picName:‘图片名字’,picUrl:‘https://gimg2.baidu.com/image_search/src=http%3A%2F%2Farticle-fd.zol-img.com.cn%2Ft_s998x562c5%2Fg5%2FM00%2F0A%2F02%2FChMkJltpVKGIQENcAAKaC93UFtUAAqi5QPdcOwAApoj403.jpg&refer=http%3A%2F%2Farticle-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639737146&t=96efdde36bc7cd05972cad237e23dae6’}]
this.zip(arr)
},

methods:{
zip (arr) {
var zip = new JSZip();
// 创建images文件夹
var imgFolder = zip.folder(“images”);
let flag = 0 // 判断加载了几张图片的标识

  for (let i = 0;i < arr.length;i++) {                  //遍历数组arr
		  this.getBase64(arr[i].picUrl).then(base64=>{  //调用getBase64()方法,传入图片网络地址得到base64数据
          base64 = base64.split('base64,')[1]
          imgFolder.file(arr[i].picName+ '.png', base64, { base64: true })//自定义图片名字，存进images文件夹里面
          if (flag === arr.length - 1) {
            zip.generateAsync({ type: "blob" }).then((blob) => {
                saveAs(blob, "压缩包名字.zip")//自定义文件压缩包名字
            })
          }
          flag++
        });
  }
},

//传入图片地址，返回base64格式数据
getBase64(img){
var image = new Image();
image.crossOrigin = ‘*’;//解决图片跨域问题
image.src = img;
return new Promise((resolve,reject)=>{
image.onload = ()=>{
resolve(this.getBase64Image(image));
}
})
},

//创建画布，将图片渲染到画布上，再将画布转为base64格式数据返回出来
getBase64Image(img,width,height) {
var canvas = document.createElement(“canvas”);
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height;
var ctx = canvas.getContext(“2d”);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
return dataURL;
},
}