vue根据后端返回的图片浏览地址本地打包（修复篇）

最新推荐文章于 2024-08-07 14:45:38 发布

莫三岁

最新推荐文章于 2024-08-07 14:45:38 发布

阅读量386

点赞数

分类专栏：下载图片文章标签：前端

本文链接：https://blog.csdn.net/mosansui/article/details/118354449

版权

本文介绍如何在Vue项目中使用jszip和file-saver，根据后端返回的图片地址进行本地打包。通过三个步骤：下载所需包，引入包到相应页面，定义打包方法，实现图片浏览功能的修复。

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

主要用到 jszip 和 file-saver!

第一步:下载包!

npm install jszip --save
npm install file-saver --save

第二步:在需要使用的页面引入包!

import JSZip from "jszip";
import FileSaver from "file-saver";

第三步:先定义一个方法!

 //定义一个base64打包的方法!
    packaging(name, baseList, address, num, zipName, loading) {
   
      // packaging方法后面第一个参数name是数组对象的key,baseList是去掉base64编码前的 data:image/png;base64,address是存放图片地址的数组,num是存放图片地址数组的长度,zipName是压缩包的名字,loading是模态框!
      let imgName = name; //数组对象的key赋值给imgName!
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
   
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/jpeg"); // 得到图片的base64编码数据,默认是jpeg格式!好处,文件小!
        let temp = {
    [imgName]: url.substring(22) }; //temp等于{对象key:去掉图片的base64编码前22位字符的数据!}key是图片的名字!他的值是图片的地址!
        baseList.push(temp); //把得到的key对象赋值到baseList数组里面!