图片下载的 几种方法 和不能下载的原因
作者：互联网
有一个常见的需求，就是下载图片。
以以往的经验，使用了a标签的方式进行了下载。如下
普通a标签用法
<a href="baidu.png" download="aa">下载</a>
或
<button @click="downloadPic">下载</button>
事件用法
downloadPic() {
let url = 'http://a.b.com/test.png'
let a = document.createElement('a')
a.src = url
a.download = 'download.' + url.slice(url.lastIndexOf('.')+1)
a.click()
}
但是上述方法只能在图片与我们的地址同域的情况下有作用，当出现跨域的情况时，download的属性便会失效，导致当我们进行上述操作后网站会跳转到图片地址上，而不是进行下载。
为此，在进行网上的资料查询后找到了以下的解决方法。
方法一（通过图片的base64编码数据进行下载 canvas.toDataURL）：
function downloadPic1 (imgsrc) {
var image = new Image()
// 解决跨域canvas污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
let canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
let context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
let a = document.createElement('a')
a.download = 'download' + url.slice(url.lastIndexOf('.'))
a.href = url
a.click()
}
image.src = imgsrc
}
方法二（利用XMLHttpRequest，blob）：
function downloadPic2 (url) {
// let url= 'http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
let x = new XMLHttpRequest()
x.open('GET', url, true)
x.responseType = 'blob'
x.onload = function () {
let url = window.URL.createObjectURL(x.response)
let a = document.createElement('a')
a.href = url
a.download = 'download';
a.click()
}
x.send()
}
// 如果canvas使用网络图像遇到跨域问题，需要服务端设置图像的响应头：Access-Control-Allow-Origin
// 如果canvas使用本地图像遇到跨域问题，可以使用plus接口将图像转换为base64再使用，相关插件：https://ext.dcloud.net.cn/plugin?id=123
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg" download="aa">下载</a>
<button type="button" onclick="downloadPic('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg')">下载图片 js a 标签 download</button>
<button type="button" onclick="downloadPic1('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg')">下载图片 canvas</button>
<button type="button" onclick="downloadPic1('http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')">下载图片 跨域问题 需要后台相关配置</button>
<button type="button" onclick="downloadPic2('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg')">下载图片 XMLHttpRequest，blob</button>
<script type="text/javascript">
function downloadPic (url) {
let a = document.createElement('a')
a.src = url
a.download = 'download.' + url.slice(url.lastIndexOf('.')+1)
a.click()
}
function downloadPic1 (imgsrc) {
var image = new Image()
// 解决跨域canvas污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
let canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
let context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
let a = document.createElement('a')
a.download = 'download' + url.slice(url.lastIndexOf('.'))
a.href = url
a.click()
}
image.src = imgsrc
}
function downloadPic2 (url) {
let x = new XMLHttpRequest()
x.open('GET', url, true)
x.responseType = 'blob'
x.onload = function () {
let url = window.URL.createObjectURL(x.response)
let a = document.createElement('a')
a.href = url
a.download = 'download';
a.click()
}
x.send()
}
// 如果canvas使用网络图像遇到跨域问题，需要服务端设置图像的响应头：Access-Control-Allow-Origin
// 如果canvas使用本地图像遇到跨域问题，可以使用plus接口将图像转换为base64再使用，相关插件：https://ext.dcloud.net.cn/plugin?id=123
</script>
</body>
</html>
总结：
同源资源图片 这几种发发都可以 canvas使用网络图像遇到跨域问题，需要服务端设置图像的响应头：Access-Control-Allow-Origin
标签：canvas,跨域,url,image,图片下载,几种,let,download,下载 来源： https://blog.csdn.net/wangxinyang0118/article/details/115790818