admin管理员组文章数量:1606473
一、需求
我刚接到需求的时候,思维比较混乱。需求:在xxx页面添加批量下载xxxx图片功能。给了后端返回的图片url。
二、思路
初始思路是使用a标签的download属性
。
下载图片的具体实现效果demo,点击链接:https://www.w3school/tiy/t.asp?f=html_a_download
效果图:
注意!!!
download 是 a 标签 html5
的新属性,可以点击下载文件。初次使用,经常出现无法点击的情况,可能有以下原因,排除下:
解决方案:
- 必须设置 href 属性,download 才起作用;
- download 属性是文件名,href 属性,指向的是要下载的文件;
- href 的指向需要同源,跨域下载不下来,当然可以通过其他方案,比如把图片传到自己后台,再返回同源的路径;
三、完成
a标签的download属性 只适用于同源的图片,如果是 非同源图片,a标签的download属性下载的图片会在浏览器中打开。 html代码生成 canvas
然后生成图片。但是html里面的图片路径必须用base64。解法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var imgSrc = 'https://profile.csdnimg/2/C/7/3_wangbadandzy'
var name = "测试图片"
function downloadPicture(imgSrc, name) {
const image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = () => {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
const url = canvas.toDataURL('image/jpg')
const a = document.createElement('a')
a.download = name || 'phone'
a.href = url
a.click()
a.remove()
}
image.src = imgSrc
}
downloadPicture(imgSrc)
</script>
</html>
其中,下载的图片可能遇到了“网络错误”,没有完成下载。使用 Blob
解决。
最终代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var imgSrc = 'https://profile.csdnimg/2/C/7/3_wangbadandzy'
var name = "测试图片"
function downloadPicture(imgSrc, name) {
const image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = () => {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.download = name || 'photo'
a.href = url
a.click()
a.remove()
URL.revokeObjectURL(url)
})
}
image.src = imgSrc
}
downloadPicture(imgSrc, name)
</script>
</html>
结语,这个函数可以直接拿去用,vue的解决方式和js相同。
四、链接
学习图片下载的链接:- vue.js如何根据后台返回来的图片url进行图片下载:https://wwwblogs/zhujiqian/p/11475467.html
版权声明:本文标题:vue实现非同源图片的下载功能--跨域问题(解决浏览器打开图片,而不是下载) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728500531a1161121.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论