前端下载图片汇总

前端下载图片汇总前端下载图片分为两类：一类是服务端协作的实现（即下载后台服务提供的资源）；另一种是纯前端下载1、服务器端配合实现前端开发很简单，只需要一个a标签，如：下载pictures直接访问文件时，如果文件是二进制文件，浏览器无法解析浏览器会下载文件，但如果浏览器能自行解析文件，则会打开文件并呈现在它自己的方式无需下载。这时候就需要设置消息响应头，告诉浏览器文件需要下载，而不是简单的打开。这时候后台需要提供一个get请求服务，并设置消息响应头，告诉浏览器需要下载文件。以node为例：app.get('/api/download/',(req,res,next)=>{//以文件流的形式下载文件varfilePath=path.join(__dirname,'../src/images/erwei.jpg');varstats=fs.statSync(filePath);res.set({'Content-Type':'application/octet-stream',//告诉浏览器这是一个二进制文件file'Content-Disposition':'attachment;filename=111',//告诉浏览器这是一个需要下载的文件'Content-Length':stats.size//文件大小});fs.createReadStream(文件路径).管道(资源);});2、纯前端下载分为两种情况：一种是从同源下载图片（比如项目文件夹下的图片）；静态资源）a．使用a标签的downlaod可以轻松实现下载同源图片，例如：下载图片b。例如借助canvas从跨域网站下载图片//调用方法//参数1：src//参数2：图片名称，可选exportconstdownloadImage=(src:string,name:string)=>{常量图像=新图像（）；//解决跨域画布污染问题image.setAttribute('crossOrigin','anonymous');image.onload=function(){constcanvas=document.createElement('canvas');canvas.width=image.width;画布高度=image.height;constcontext=canvas.getContext('2d');context.drawImage(image,0,0,image.width,image.height);consturl=canvas.toDataURL('image/png');//生成标签consta=document.createElement('a');//创建点击事件constevent=newMouseEvent('click');//设置a的download属性为我们要下载的图片如果名称不存在，则使用'picture'作为默认名称a.download=name||'图片';//将生成的URL设置为a.href属性a.href=url;//触发点击事件a.dispatchEvent(event);};图片.src=来源}