手机H5页面在IOS系统中无法获取Geolocation

需求

在开发H5页面的时候希望获取用户的地理位置信息，这里演示在用户上传图片的时候将用户的地理位置信息作为水印显示。

问题

在安卓手机使用vant-upload组件是没问题的，但是在IOS手机上有，报下面的提示信息。

原因

苹果的IOS做了限制，如果需要使用IOS的服务，必须是HTTS协议的域名，不能是HTTP。

步骤

这里使用的是vue-cli脚手架，当前版本如下截图

1. 开启https服务,在vue.config.js进行如下配置，然后重新启动项目:

module.exports = defineConfig({
  devServer: {
    server: 'https',
  },
})

2. 然后用手机浏览器就可以直接上传了，然后在图片上有水印信息

效果

代码

<template>
  <div class="app" ref="appRef">
    <van-uploader v-model="file_list" :before-read="beforeRead" />
  </div>
</template>

<script>
import { Dialog } from 'vant'
import watermark from 'watermarkjs'
export default {
  data() {
    return {
      file_list: [],
    }
  },
  methods: {
    beforeRead(file) {
      return new Promise((resolve, reject) => {
        let text = ''
        function success_cb(pos) {
          var { latitude, longitude } = pos.coords
          text = `经度:${latitude},纬度:${longitude}`
          generateWatermark()
        }
        function error_cb(err) {
          text = err.message
          generateWatermark()
          Dialog({ message: text })
          console.log('error', err)
        }
        navigator.geolocation.getCurrentPosition(success_cb, error_cb, {
          enableHighAccuracy: false,
          timeout: 3000,
          maximumAge: 0,
        })
        function customFn(target) {
          var context = target.getContext('2d')
          // var text = text
          var metrics = context.measureText(text)
          var x = 0.01 * target.width
          var y = 0.04 * target.height
          const fontSize = 0.05 * target.width

          context.translate(x, y)
          context.globalAlpha = 0.5
          context.fillStyle = '#f00'
          context.font = `700 ${fontSize}px Josefin Slab`
          context.fillText(text, 0, 0)
          return target
        }

        const generateWatermark = () => {
          watermark([file])
            .image(customFn)
            .then((img) => {
              this.$refs.appRef.append(img)
              const watermark_file = this.dataURLtoFile(img.src, file.name)
              console.log(watermark_file)
              resolve(watermark_file)
              // this.transformFileToBase64(watermark_file, file)
            })
        }
      })
    },
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },
  },
}
</script>

<style lang="less" scoped>
.app {
  padding: 50px;
}
</style>

参考文档

https://blog.csdn.net/everything1209/article/details/53540621