有一个常见的需求,就是下载图片。
以以往的经验,使用了a标签的方式进行了下载。如下
<button @click="downloadPic">下载</button>
donloadPic () {
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编码数据进行下载):
downloadPic () {
let imgsrc= 'http://a.b.com/test.png'
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.toDateURL('image/png') // 得到图片的base64编码数据
let a = document.createElement('a')
a.download = 'download' + url.slice(url.lastIndexOf('.'))
a.href = url
a.click()
}
image.src = imgsrc
}
上述代码中需要注意的是在获取图片的base64编码数据的时候,图片越大,转换后的base64编码就越长,应避免对大图的编码转换,防止超出浏览器的访问路径长度限制。
方法二(利用XMLHttpRequest,blob):
downloadPic () {
let imgsrc= 'http://a.b.com/test.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()
}
值得注意的是,在方法二中a.download属性并没有赋予后缀,但是在下载的时候却会为我们添加上图片的后缀路径,在方法一中则不会自动添加。
对于方法二中的x.responseTyoe = 'blob’因为我也说不清这个属性的作用,所以不在此处解释,后续了解清楚后会再说明。