需求
在开发H5页面的时候希望获取用户的地理位置信息，这里演示在用户上传图片的时候将用户的地理位置信息作为水印显示。
问题
在安卓手机使用vant-upload组件是没问题的，但是在IOS手机上有，报下面的提示信息。
原因
苹果的IOS做了限制，如果需要使用IOS的服务，必须是HTTS协议的域名，不能是HTTP。
步骤
这里使用的是vue-cli脚手架，当前版本如下截图
- 开启https服务,在
vue.config.js进行如下配置，然后重新启动项目:
module.exports = defineConfig({devServer: {server: 'https',},
})
- 然后用手机浏览器就可以直接上传了，然后在图片上有水印信息
效果
代码
<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.coordstext = `经度:${latitude},纬度:${longitude}`generateWatermark()}function error_cb(err) {text = err.messagegenerateWatermark()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 = textvar metrics = context.measureText(text)var x = 0.01 * target.widthvar y = 0.04 * target.heightconst fontSize = 0.05 * target.widthcontext.translate(x, y)context.globalAlpha = 0.5context.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>
