一、需求

我刚接到需求的时候，思维比较混乱。
需求：在xxx页面添加批量下载xxxx图片功能。给了后端返回的图片url。

二、思路

初始思路是使用a标签的download属性。
下载图片的具体实现效果demo，点击链接:https://www.w3school.com.cn/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.cn/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.widthcanvas.height = image.heightconst 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 = urla.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.cn/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.widthcanvas.height = image.heightconst 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 = urla.click()a.remove()URL.revokeObjectURL(url)})}image.src = imgSrc}downloadPicture(imgSrc, name)
</script></html>

结语，这个函数可以直接拿去用，vue的解决方式和js相同。

四、链接

学习图片下载的链接：

vue.js如何根据后台返回来的图片url进行图片下载：https://www.cnblogs.com/zhujiqian/p/11475467.html

vue实现非同源图片的下载功能--跨域问题(解决浏览器打开图片，而不是下载)相关推荐

同源策略_如何支持跨域
欢迎大家阅读<朝夕Net社区技术专刊> 我们致力于.NetCore的推广和落地,为更好的帮助大家学习,方便分享干货,特创此刊!很高兴你能成为忠实读者,文末福利不要错过哦! 01 PART ...
process.env.NODE_ENV与@vue/cli-service及其.env.*默认外部环境配置文件之跨域部署
process.env.NODE_ENV与@vue/cli-service及其.env.*默认外部环境配置文件之跨域部署目录 process.env.NODE_ENV与@vue/cli-servic ...
gorilla websocket无法跨域_聊聊浏览器同源策略与跨域方案详解
开发出高性能的 Web 应用固然重要,但安全问题也不容小觑.本文我们继续以 HTTP 为线索,展开来讲一讲浏览器安全相关的同源策略. 浏览器的同源策略(Same Origin Policy) 源(Or ...
浏览器同源策略及跨域的解决方法
浏览器同源策略及跨域的解决方法参考文章: (1)浏览器同源策略及跨域的解决方法 (2)https://www.cnblogs.com/laixiangran/p/9064769.html 备忘一下.
ps无法在此计算机上运行,解决PS打开图片＂无法完成请求,因为文件格式模块不能解析该文件＂...
当Photoshop(PS)软件打开某张图片的时候,忽然提示并弹出对话框"(不能)无法完成请求,因为文件格式模块不能解析该文件",很多用户会想,明明就是一张图片为什么PS打不开?下 ...
JavaScript点击按钮下载图片，涉及同源下载和跨域下载
以下内容适用于同源下载图片: 参考:https://blog.csdn.net/Thea12138/article/details/82801375 <button class="do ...
js 图片下载（不是直接在页面打开图片）
浏览器图片下载(而不是直接在页面打开图片) 项目中出现了用户要下载图片的情况,做完了功能之后发现根本下载不了,都是直接在浏览器打开了,搜了好久才找到方法代码如下 function downloadI ...
js图片下载(支持跨域/解决Access-Control-Allow-Origin)
一.思路使用canvas绘制图片使用toBlob方法将canvas图片转换为文件使用a标签的download属性下载这个canvas转化生成的图片文件 canvas.toBlob() 将canv ...
微信屏蔽内置浏览器的下载功能的解决方案：微信跳转到手机默认浏览器下载
今天一后台同事问我:为什么从App里面分享到微信好友时,在微信里没有发下载分享里的软件,而在浏览器中却可以? 于是我在微信公众号中试了一下,发现果然不可以下载.通过google 发现,原来是微信屏蔽了 ...
什么是同源策略，什么是跨域，如何解决跨域
1.什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由 Netscape 公司 1995 年引入浏览器,它是浏览器最核心也最基本的安全功能,现在所有支持 Java ...

vue实现非同源图片的下载功能--跨域问题(解决浏览器打开图片，而不是下载)

一、需求

二、思路

三、完成

四、链接

vue实现非同源图片的下载功能--跨域问题(解决浏览器打开图片，而不是下载)相关推荐

最新文章

热门文章