vue实现图片下载功能so easy

最新推荐文章于 2024-07-13 11:45:14 发布

原创最新推荐文章于 2024-07-13 11:45:14 发布 · 7.2k 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #html

vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何实现图片下载功能，包括同源和非同源图片的处理方式。提供了使用HTML、JavaScript以及axios请求等多种方法，并解决了GIF格式下载的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
        // 将画布内容转换为Blob
        canvas.toBlob((blob) => {
            // blob转为同源url
            let blobUrl = window.URL.createObjectURL(blob)
            // 创建a链接
            const a = document.createElement('a')
            a.href = blobUrl
            a.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)
        // 将画布内容转换为base64
        let base64 = canvas.toDataURL()
        // 创建a链接
        const a = document.createElement('a')
        a.href = base64
        a.download = ''
        // 触发a链接点击事件，浏览器开始下载文件
        a.click()
    }
}

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

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

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