React通过后台图片路径，打包下载图片

使用的依赖包： jszip file-saver

npm i file-saver --save -dev
npm i jszip --save -dev

jszip.js

import JSZip from 'jszip'
import FileSaver from 'file-saver'export default function toZip(imgSrcList,fileName) {let zip = new JSZip();//实例化一个压缩文件对象let imgFolder = zip.folder(fileName); //新建一个图片文件夹用来存放图片，参数为文件名for(let i=0;i<imgSrcList.length;i++){let src = imgSrcList[i];let tempImage = new Image();tempImage.src = src;tempImage.crossOrigin = "*";tempImage.onload = ()=> {imgFolder.file((i+1)+'.jpg', getBase64Image(tempImage).substring(22), { base64: true })}}setTimeout(()=>{zip.generateAsync({ type: 'blob' }).then( function(content) {FileSaver.saveAs(content, 'images.zip')})},3000)
}function getBase64Image(img) {let canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;let ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);let ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();let dataURL = canvas.toDataURL("image/"+ext);return dataURL;
}

使用方法：

// 引入jszip.js文件import toZip from 'utils/jszip'// 使用方法toZip(imgSrcList,fileName);

React通过后台图片路径，打包下载图片相关推荐

打包下载图片（文件）
1. 打包下载图片(文件) ·ReportFile 实体类随便你自己怎么写了 ·reportFile.getFilePath() 文件存放路径 /*** @param id*/ @ResponseB ...
NO.17——应用Scrapy框架实现美女图片的打包下载
一.基础知识 Scrapy是基于Twisted的异步处理框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以应用在获取API所返回的数据(例如 Amazon Associates ...
img绝对路径图片显示_使用python爬虫去风景图片网站批量下载图片
使用python爬虫(requests,BeautifulSoup)去风景图片网站批量下载图片 1.写代码背景: 今天闲来无事,想弄点图片放到电脑,方便以后使用,故去百度查找一些风景图片网站,发现图片 ...
JSZip + FileSaver 实现Vue打包下载图片
1. 版本 "file-saver": "^2.0.5", "jszip": "^3.6.0" 2. 实现 import ...
python + selenium +pyquery 爬虫爬取 1688详情图片阿里巴巴详情图片与标题下载图片并进行压缩
python + selenium +pyquery 爬虫爬取 1688详情图片阿里巴巴详情图片与标题下载图片并进行压缩用到的库和源码下载地址需要用到chromedriver 包含wi ...
springboot获取静态图片路径_Springboot通过图片路径形式获取图片
Springboot通过图片路径形式获取图片一致以来都是用 http://127.0.0.1:8888/getPhoto?imgUrl=1.jpg 的形式获取数据,今天突然要 http://127. ...
通过jS打包下载图片
<script src="~/Areas/House/Content/js/HouseInfo/jszip.js"></script> <script ...
php 打包下载网络图片,PHP实现图片批量打包下载功能
上次遇到一个需要打包下载批量图片的问题,找了一下发现这个好方法,记录一下. 首先新建一个zipfile打包类: class zipfile { var $datasec = array (); var ...
JavaScript前端批量下载图片文件打包下载
参考:https://blog.csdn.net/qdm13209211861/article/details/126668206 参考代码在获取base64的时候有图片失真的问题.下面的代码已经修复 ...
前端批量打包下载图片
1.批量下载图片(jquery) <!DOCTYPE html> <html><head><meta charset="utf-8" / ...

React通过后台图片路径，打包下载图片

React通过后台图片路径，打包下载图片相关推荐

最新文章

热门文章