js进行图片本地下载（多张打包，单张）

js进行图片本地下载

这里我分两种一种是单张图片下载比较简单，另外一种是打包图片下载

批量图片下载

import JSZip from "jszip";
import FileSaver from "file-saver";//这里随便定义的数据const sourceList = [{id: 1,qrCode: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.redocn.com%2Fsheying%2F20160504%2Fmeilidehuacao_6269877.jpg&refer=http%3A%2F%2Fimg.redocn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655787943&t=a7b520e6c6ccb7a964be78218a421ba0',picName: '图片1'}, {id: 2,qrCode: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.redocn.com%2Fsheying%2F20150326%2Fyuanyeshangyikegududebaishu_4059557.jpg&refer=http%3A%2F%2Fimg.redocn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655787943&t=0be9a4b37d04e2dd7cd2b0ae472dac41',picName: '图片2'}]//转换图片为base64格式const getImageBase64 = image => {// 创建一个画布const canvas = document.createElement('canvas')// 让画布的宽高等于图片的宽高canvas.width = image.widthcanvas.height = image.height// 然后在画布上进行画画const ctx = canvas.getContext('2d')// 开始画图片，1.绘制的对象2.绘制的位置，3绘制的宽高ctx.drawImage(image, 0, 0, image.width, image.height)//下面一段代码是看某位up主写的我感觉并无多大作用便注释掉了，重新写了一段代码，知道下面这段跟我的有啥区别欢迎评论区指出// 设置图片后缀名// const extension = image.src//     .substring(image.src.lastIndexOf('.') + 1)//     .toLowerCase()// return canvas.toDataURL('image/' + extension, 1)return canvas.toDataURL()}//执行打包下载 参数一下载的批量图片信息, 参数二打包后的压缩包名称自己定义downloadZip(sourceList, zipName = '二维码集合')//打包下载方法async function downloadZip(sourceList, zipName) {const zip = new JSZip() //创建一个压缩对象const fileFolder = zip.folder(zipName) // 创建 zipName 文件夹const fileList = []//遍历图片数据for (let i = 0; i < sourceList.length; i++) {//压缩后的每张图片对应名const name = sourceList[i].picName // 注意: 每张图片的名称--需要对数据属性进行转换//创建图片对象 设置图片基本信息const image = new Image()image.setAttribute('crossOrigin', 'Anonymous') // 设置 crossOrigin 属性，解决图片跨域报错//设置图片地址----稍后进行base64转换image.src = sourceList[i].qrCode//图片下载image.onload = async() => {//路径base64转换const url = await getImageBase64(image)//往压缩包里添加图片数据fileList.push({name: name,//压缩名img: url.substring(22)//去掉base64文件标识，img是文件形式}) //确保每个数据都遍历完if (fileList.length === sourceList.length) {//确保数据不为空if (fileList.length) {for (let k = 0; k < fileList.length; k++) {// 往文件夹中，添加每张图片数据fileFolder文件夹压缩包fileFolder.file(fileList[k].name + '.png', fileList[k].img, {base64: true,//下面的可以省略compression: "DEFLATE",      // STORE：默认不压缩 DEFLATE：需要压缩compressionOptions: {level: 9  // 压缩等级1~9    1压缩速度最快，9最优压缩方式// [使用一张图片测试之后1和9压缩的力度不大，相差100字节左右]//注意到达这里的时候image的路径必须是带有data：image/png;base64,}})}zip.generateAsync({// 压缩的结果为blob类型（二进制流）,可用作文件上传type: 'blob'}).then(content => {// 直接在浏览器打成zipName.zip包并下载，saveAs依赖的js是FileSaver.jsFileSaver.saveAs(content, zipName + '.zip')})}}}}}

下面两张图片是开启压缩跟不压缩发现差别并不大，（我这里是两张图片的压缩)

单张图片下载

 downloadIamge(imgsrc, name = '图片名称') {//下载图片地址和图片名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/png'); //得到图片的base64编码数据let a = document.createElement('a'); // 生成一个a元素a.download = name ; // 设置图片名称a.href = url; // 将生成的URL设置为a.href属性//let event = new MouseEvent('click'); // 创建一个单击事件//a.dispatchEvent(event); // 触发a的单击事件a.click()//上面两个代码等于这个代码};image.src = imgsrc;},

js进行图片本地下载（多张打包，单张）相关推荐

vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
Node.js aitaotu图片批量下载Node.js爬虫1.00版
即使是https网页,解析的方式也不是一致的,需要多试试. 代码: //====================================================== // aitaot ...
Node.js umei图片批量下载Node.js爬虫1.00
这个爬虫在abaike爬虫的基础上改改图片路径和下一页路径就出来了,代码如下: //====================================================== // ...
Node.js mimimn图片批量下载爬虫 1.00
这个爬虫在Referer设置上和其它爬虫相比有特殊性.代码: //====================================================== // mimimn图片批 ...
Node.js meitulu图片批量下载爬虫1.051
原有1.05版程序没有断点续传模式,现在在最近程序基础上改写一版1.051. //====================================================== // m ...
Node.js monly图片批量下载爬虫1.00
此爬虫又用到了iconv转码,代码如下: //====================================================== // mmonly图片批量下载爬虫1.00 ...
java抓取网页数据_实现网络图片爬虫，只需5秒快速把整个网页上的图片全下载打包zip...
我们经常需要用到互联网上的一些共享资源,图片就是资源的一种,怎么把网页上的图片批量下载下来?有时候我们需要把网页上的图片下载下来,但网页上图片那么多,怎么下载我们想要的东西呢,如果这个网页都是我们想要 ...
Python利用bs4批量抓取网页图片并下载保存至本地
Python利用bs4批量抓取网页图片并下载保存至本地使用bs4抓取网页图片,bs4解析比较简单,需要预先了解一些html知识,bs4的逻辑简单,编写难度较低.本例以抓取某壁纸网站中的壁纸为例.(b ...
还在抠图？百万张PNG透明图片免费下载！
百万张PNG透明图片免费下载 png格局的图片因为去掉了的布景,方便使用在任何颜色的布景,所以对于从事设计师的朋友来说,经常会用到png透明图片.今天分享给大家几个供给免费下载png图片的网站.本文章 ...

js进行图片本地下载（多张打包，单张）

js进行图片本地下载

批量图片下载

单张图片下载

js进行图片本地下载（多张打包，单张）相关推荐

最新文章

热门文章