首页 > 其他分享 >前端利用oss图片地址返回url下载zip包

前端利用oss图片地址返回url下载zip包

时间:2023-10-31 09:46:03浏览次数:26  
标签:canvas zip url oss base64 length let image

// 首先引入插件
npm install jszip

// 导入项目

import JSZip from 'jszip'

// 利用canvas.toDataURL 转换base64方法下载图片 downZip() {
    // 测试数据 let downLoadImageList = ['https://img1.baidu.com/it/u=1112636550,1561836273&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1669568400&t=a9198393d4bafd6434583994737ec992', 'https://img1.baidu.com/it/u=1112636550,1561836273&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1669568400&t=a9198393d4bafd6434583994737ec992']; if ( downLoadImageList.length === 0 ) { this.$message({ type: 'warning', message: '请选中所要下载的图片' }); return } let zip = new JSZip(); let zipTitle = "订单"+ this.info.infoVo.orderNo let baseList = []; // 要下载图片的url for (let i = 0; i < downLoadImageList.length; i++) { let image = new Image(); // 解决跨域 Canvas 污染问题 crossOrigin,后端也要配置 image.setAttribute("crossOrigin", "anonymous"); let that = this; 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 base64Img = canvas.toDataURL(); // 转换成base64 数据 canvas.toDataURL("image/png"); baseList.push(base64Img.substring(22)); // 去掉base64编码前的 data:image/png;base64, 或者 base64Img.replace(/^data:image\/(png|jpg);base64,/, "") if (baseList.length === downLoadImageList.length && baseList.length > 0) { for (let k = 0; k < baseList.length; k++) { zip.file(`图片${Number(k) + 1}.png`, baseList[k], { base64: true }); } zip.generateAsync({ type: "blob" }).then(function (content) { FileSaver.saveAs(content, zipTitle + ".zip"); }); } that.$nextTick(()=>{ console.log('销毁', i) context.clearRect(0, 0, canvas.width, canvas.height); }) }; image.src = downLoadImageList[i]; } }

最终的到的就是一个zip包

标签:canvas,zip,url,oss,base64,length,let,image
From: https://www.cnblogs.com/zxrbky/p/17799558.html

相关文章

  • Shell脚本操作OSS服务:PUT、GET(纯shell脚本无sdk)
    Shell脚本操作OSS服务:PUT、GET(纯shell脚本无sdk)前提:一般情况下对OSS操作都会通过SDK,但是很多情况下对OSS进行简单的上传下载的操作,那么SDK就显得有些臃肿,先要下载sdk包,然后再写些简单的操作脚本,而通过shell脚本就会简单很多。而且很多场景:线上网站、数据库等,生产出来的网站数据、......
  • 备份数据库文件至OSS服务(纯shell脚本无sdk)
    背景:凡事使用服务器搭建的网站就需要定时备份网站数据,常见的方法是打包网站目录,然后备份到FTP服务器上等。也有通过OSSSDK把备份的网站文件上传到OSS服务器上,但是通过SDK来实现,需要一定的技术能力,而且相对比较复杂,需要使用更多的文件,而这篇文章是通过shell脚本,并不是通过OSSSDK......
  • 如何修改URL而不重新加载页面?
    内容来自DOChttps://q.houxu6.top/?s=如何修改URL而不重新加载页面?有没有办法在不重新加载页面的情况下修改当前页面的URL?如果可能的话,我想访问#哈希之前的部分。我只需要更改域名之后的部分,所以它不像是违反了跨域政策。window.location.href="www.mysite.com/page2.......
  • [CISCN2023] unzip
    [CISCN2023]unzip前言什么是软链接软链接是Linux里面常用的一个命令,它的功能是为某一个文件在另外一个位置建立一个同步的链接。它类似与c语言中的指针,传递的是文件的地址。软链接类似于windows中的快捷方式。可以用这种方式来突破只能在tmp文件夹上传文件的限制。解题unzip......
  • python 飞书 获取飞书租户访问令牌 自定义机器人 向webhook_url发送POST请求
    importjsonimportrequestswebhook_url=post_data=#见应用凭证#获取飞书租户访问令牌,用于调用飞书开放平台的其他API接口#url:飞书开放平台的获取租户访问令牌的API接口地址url=r"https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal/"r=......
  • Soil and Water Loss in Southern Jiangxi
      Ganzhou, a typical red soil hilly area in Jiangxi province, is a pilot area for high-quality development of soil and water conservation in China. Through a series of following innovative initiatives, soil erosion in Gan......
  • OSS存储静态资源(直接上手使用)
    什么是OSSOSS是对象存储服务(ObjectStorageService)的缩写,是一种用于存储和访问大规模数据的云存储服务。它提供了安全、可靠、高扩展性的存储解决方案,可用于存储各种类型的数据,如图片、音频、视频、文档等。OSS具有高可用性和耐久性,能够自动复制数据以保证数据的安全性和可靠性。......
  • 流畅的Flurl.Http[转]
    流畅的Flurl.Http https://flurl.dev/docs/testable-http/注意:除了URL构建和解析之外的所有内容都需要安装Flurl.Http而不是基本的Flurl包。考虑与HTTP服务交互的一种非常常见的方式是“我想构建一个URL,然后调用它”。Flurl.Http允许您非常简洁地表达:usingFlurl;u......
  • Spring Boot环境下自定义shiro过滤器会过滤所有的url的问题
    问题起因:在Shiro配置类中定义如下:@BeanpublicShiroFilterFactoryBeanshiroFilterFactoryBean(ShiroAuthFiltershiroAuthFilter,SecurityManagersecurityManager){ShiroFilterFactoryBeanfactoryBean=newShiroFilterFactoryBean();Map<String,......
  • Technical support website(URL)
    Thissoftwarerespectsandprotectsthepersonalprivacyofallusersusingtheservice.Inordertoprovideyouwithmoreaccurateandpersonalizedservices,thissoftwarewilluseanddiscloseyourpersonalinformationinaccordancewiththeprovisions......