web图片下载
1、form.onsubmit方法
利用form表单onsubmit静态提交
downFile(url, value) {
let domForm = document.createElement('form'),
npt = document.createElement('input')
domForm.appendChild(npt)
npt.setAttribute('name', 'imageId')
npt.setAttribute('value', value)
domForm.setAttribute('method', 'get')
domForm.setAttribute('action', url)
domForm.style.display = 'none'
document.body.appendChild(domForm)
domForm.submit()
document.body.removeChild(domForm)
}
2、canvas.toDataURL("image/png")方法
利用Image对象为浏览器缓存一张图片,创建canvas将其转为base64进行drawImage绘制截取,然后创建a标签,利用download固有属性进行下载
downFile(imgsrc, name) {
let image = new Image()
image.setAttribute("crossOrigin", "anonymous")// 解决跨域 Canvas 污染问题
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编码数据
a = document.createElement("a"),
event = new MouseEvent("click")
a.download = name || "photo"
a.href = url
a.dispatchEvent(event)
}
image.src = imgsrc
}
3、a标签download属性
function downHandle(fileName, url) {
if ('download' in document.createElement('a')) {
let link = document.createElement('a')
link.setAttribute('download', `${ fileName }`);
link.style.display = 'none'
link.href = url
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
} else {
navigator.msSaveBlob(blob, fileName)
}
}