js移动端保存图片到相册

在常规PC端保存图片一般使用的是a标签， 代码如下：

//  base64 或 url 下载图片，可指定宽高，当只指定其中一个时候等比例缩放
export const downLoadImgByUrl = ({ url, width, height }) => {
  let canvas = document.createElement('CANVAS')
  let ctx = canvas.getContext('2d')
  let img = new Image()
  img.crossOrigin = 'Anonymous'
  img.onload = function () {
    let ResWidth
    let ResHeight

    if (width && height) {
      ResWidth = width
      ResHeight = height
    } else if (width) {
      ResWidth = width
      ResHeight = img.height * (width / img.width)
    } else if (height) {
      ResHeight = height
      ResWidth = img.width * (height / img.height)
    } else {
      ResWidth = img.width
      ResHeight = img.height
    }
    canvas.width = ResWidth
    canvas.height = ResHeight
    console.log(ResWidth, ResHeight)
    ctx.drawImage(img, 0, 0, ResWidth, ResHeight)

    let saveA = document.createElement('a')
    document.body.appendChild(saveA)
    saveA.href = canvas.toDataURL('image/jpeg', 1)
    saveA.download = 'mypic' + new Date().getTime()
    saveA.target = '_blank'
    saveA.click()
    canvas = null
  }
  img.src = url
}

//  base64 或 url 下载图片，不通过img标签形式
export const downloadByBlob = Url => {
  var blob = new Blob([''], { type: 'application/octet-stream' })
  var url = URL.createObjectURL(blob)
  var a = document.createElement('a')
  a.href = Url
  a.download = Url.replace(/(.*\/)*([^.]+.*)/gi, '$2').split('?')[0]
  var e = document.createEvent('MouseEvents')
  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
  a.dispatchEvent(e)
  URL.revokeObjectURL(url)
}
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

那么问题来了， 如果将a标签使用在移动端。 又是怎样的呢？

• 部分安卓浏览器会自动保存到相册中。
• ios会出现类似于pc端的一个下载状态

解决办法： 不用a标签，改用 navigator.share()
注意点 ： navigator.share只能在https中使用。 所以开发环境下如果是http。。嗯哼，是没有效果的喔！！！！！！

navigator.share(data)
1

data ：

包含要共享的数据的对象。

用户代理不知道的属性会被忽略；共享数据仅根据用户代理理解的属性进行评估。所有属性都是可选的，但必须至少指定一个已知数据属性。

可能的值为：

url：表示要共享的 URL 的字符串。
text：表示要共享的文本的字符串。
title：表示要共享的标题的字符串。可能被目标忽略。
files：File表示要共享的文件的对象数组。有关可共享的文件类型

  const data = {
    title: document.title,
    text: 'Beautiful images',
    files: [UseStore.file]
    // url: document.location.href
  }
  if (navigator.canShare(data)) {
    navigator
      .share(data)
      .then(() => {})
      .catch(() => {
        console.log('分享失败')
      })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14