vue实现图片下载功能so easy

1.在前端实现图片下载分为同源图片下载和非同源图片下载
2.解决方案可以根据同源和非同源来制定

同源图片下载方案

html中可以这样写

<a href="./img/logo.png" download="logo.png"></a>

javascript中可以这样写

function imgDownload(url,name){//创建一个a标签const a_b = document.createElement('a');//设置href指向a_b.href = url;//设置图片下载名字a_b.download = name;//点击a标签a_b.click()
}
imgDownload('./img/logo.png','logo.png');

非同源图片下载方案

1.将图片转化为blob或者base64

//将图片转化为blob对象再进行下载
function urlToBlobAndDownload(url){//实例化一个img对象const img = new Image();//设置img的图片路径img.src = url;//设置跨域解决img.setAttribute('crossOrigin', 'Anonymous');//img加载完后处理img.onload = function() {//创建一个canvas对象const canvas = document.createElement('canvas')//把图片的宽度设为canves的宽度canvas.width = img.width//把图片的高度设为canves的高度canvas.height = img.height//创建一个2d画布const ctx = canvas.getContext('2d')// 将img中的内容画到画布上ctx.drawImage(img, 0, 0, canvas.width, canvas.height)// 将画布内容转换为Blobcanvas.toBlob((blob) => {// blob转为同源urllet blobUrl = window.URL.createObjectURL(blob)// 创建a链接const a = document.createElement('a')a.href = blobUrla.download = ''// 触发a链接点击事件，浏览器开始下载文件a.click()})}
}

//将图片转化为base64再进行下载
function urlToBase64AndDownload(url){//实例化一个img对象const img = new Image();//设置img的图片路径img.src = url;//设置跨域解决img.setAttribute('crossOrigin', 'Anonymous');//img加载完后处理img.onload = function() {//创建一个canvas对象const canvas = document.createElement('canvas')//把图片的宽度设为canves的宽度canvas.width = img.width//把图片的高度设为canves的高度canvas.height = img.height//创建一个2d画布const ctx = canvas.getContext('2d')// 将img中的内容画到画布上ctx.drawImage(img, 0, 0, canvas.width, canvas.height)// 将画布内容转换为base64let base64 = canvas.toDataURL()// 创建a链接const a = document.createElement('a')a.href = base64a.download = ''// 触发a链接点击事件，浏览器开始下载文件a.click()}
}

以上两种方案生成的图片格式大部分为png格式，可以打开看的，但是gif的下载就为一帧了，下面这种方案可以实现gif的下载，不改变格式

2.通过axios请求来实现图片下载

function downloadByAxios(url,name){axios({//设置图片路径url:url,//设置请求方法为get请求method:'get',//设置相应类型为blobresponseType: 'blob'}).then(//得到的是一个blob对象res => {let url = window.URL.createObjectURL(res.data)const a = document.createElement('a');a.href = urla.download = namea.click()})
}

坑点

如果是请求oss上的图片的话，会有一个跨域的提示，解决方案是去oss服务控制台设置跨域规则

oss图片跨域解决方案

vue实现图片下载功能so easy相关推荐

织梦图集php,织梦怎么为新图集页面增加图片下载功能
织梦怎么为新图集页面增加图片下载功能? 织梦DEDECMS为新图集页面增加图片下载功能推荐学习:织梦cms 编辑打开 /templets/default/images/photo/heiphoto. ...
jq实现图片下载功能
很多时候网站中都会有下载功能,一般的下载直接指定a链接然后直接就能下载了,但是有些文件比较特殊,如图片,指定a链接的时候会直接在浏览器中打开图片,这并不是我们想要的,有人说在a链接中加个downloa ...
Java实现网页截屏功能（图片下载功能）的几种方式（整理）
最近的项目中,需要实现一个将网页中显示的内容导出为图片的功能,故研究了一下可以实现这个功能的各种方式,整理在此,以供以后使用. p.s. 本人为java研发,所有涉及的代码,实现方式均为java的方式 ...
java实现图片下载功能
前端页面 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
Vue - 实现图片裁剪功能，并上传到服务器（内置第三方最优秀的裁剪图片组件，上传到服务器功能）干净整洁无 BUG 的示例源码与超详细的注释，兼容任意浏览器
前言您可以滑动到文章最底部,直接克隆完整示例 Gitee 仓库,与本文教程最终效果一致. 在项目开发中,您难免会遇到图片上传到服务器之前,用户可进行裁剪的需求, 在看了网上大部分教程后,代码都非常乱 ...
JS -- base64实现图片下载功能
思路前端拿到处理好的 base64 数据,创建 a 下载图片代码: const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhE ...
JS实现图片下载功能
download (config) {const a = document.createElement('a') // 创建一个a标签a.href = config.src // a标签的src属性赋 ...
ssm上传文件获取路径_SSM实现图片上传下载功能
0. 基本步骤框架搭建实现带图片上传的注册功能实现下载功能 1. 框架搭建 Step1 创建开发项目创建基础MVC包结构:controller.service.mapper.pojo Step2 ...
vue中如何实现图片放大镜功能
vue中图片放大镜功能 1.在vue项目中不可避免的会做一个图片放大镜的弄能(例如.商城.店铺等),今天同事问了这个功能恰好以前写过,因此记录一下. 2.废话不多说直接上代码: 父组件中: <t ...

vue实现图片下载功能so easy

vue实现图片下载功能so easy

同源图片下载方案

非同源图片下载方案

坑点

vue实现图片下载功能so easy相关推荐

最新文章

热门文章