1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| <script>
downloadByBlob(imageUrl, name) {
const image = new Image()
// 解决跨域问题
image.setAttribute('crossOrigin', 'anonymous')
image.src = imageUrl
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 quality = 0.8
// 这里的dataUrl就是base64类型
const dataUrl = canvas.toDataURL('image/jpeg', quality)// 使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
const arr = dataUrl.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bStr = atob(arr[1])
let n = bStr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bStr.charCodeAt(n)
}
const blob_ = new Blob([u8arr], { type: mime })
if (this.myBrowser() === 'IE') {
const url = {
name: name,
src: blob_
}
// filename文件名包括扩展名，下载路径为浏览器默认路径
navigator.msSaveBlob(url.src, url.name)
} else {
const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
save_link.href = dataUrl
save_link.download = name
const event = document.createEvent('MouseEvents')
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
save_link.dispatchEvent(event)
}
}
},
myBrowser() {
const userAgent = window.navigator.userAgent // 取得浏览器的userAgent字符串
const isOpera = userAgent.indexOf('Opera') > -1 // 判断是否Opera浏览器
const isIE = userAgent.indexOf('NET') > -1 && userAgent.indexOf('rv') > -1 // 判断是否IE浏览器
const isEdge = userAgent.indexOf('Edge') > -1 // 判断是否IE的Edge浏览器
const isFF = userAgent.indexOf('Firefox') > -1 // 判断是否Firefox浏览器
const isSafari = userAgent.indexOf('Safari') > -1 && userAgent.indexOf('Chrome') === -1 // 判断是否Safari浏览器
const isChrome = userAgent.indexOf('Chrome') > -1 && userAgent.indexOf('Safari') > -1 // 判断Chrome浏览器
if (isIE) {
return 'IE'
}
if (isOpera) {
return 'Opera'
}
if (isEdge) {
return 'Edge'
}
if (isFF) {
return 'FF'
}
if (isSafari) {
return 'Safari'
}
if (isChrome) {
return 'Chrome'
}
}
</script>
|
