vue中调用安卓相机时获得当前定位并加水印显示

需求：vue框架中调用安卓相机，在拍摄过程中需要定位到当前位置，然后将经纬度作为水印打印到照片上，传给后端完成保存。

一、vue中如何调用移动端相机

1.位置：在需要用到相机的vue组件中

2.准备工作

<template>
  <div class="mui-content">
    <button @click="galleryImg">从相册选取</button>
    <button @click="captureImage">拍照</button>
    <div class="imgBox">
      <img :src="imgSrc">
    </div>
  </div>
</template>

  data() {
    return {
      imgSrc: '', //展示的图片路径,
    }
  }

3.具体方法定义

// 从相册中选取图片
    galleryImg() {
      let This = this
      plus.gallery.pick(function (path) { //从相册中选择图片
        This.imgSrc = path;
        console.log("相册中照片的位置" + path);
      }, function (e) { //取消选择图片
        console.log("取消选择图片");
      }, {
        filter: "image"
      });
    },
//拍照
captureImage() {
      let This = this
      var cmr = plus.camera.getCamera(); //获取摄像头管理对象
      var res = cmr.supportedImageResolutions[0]; //字符串数组，摄像头支持的拍照分辨率
      var fmt = cmr.supportedImageFormats[0]; //字符串数组，摄像头支持的拍照文件格式
      console.log("拍照分辨率: " + res + ", 拍照文件格式: " + fmt);
      cmr.captureImage(function (path) { //进行拍照操作
            // 通过URL参数获取目录对象或文件对象
              plus.io.resolveLocalFileSystemURL(path, function (entry) {
              var tmpPath = entry.toLocalURL(); //获取目录路径转换为本地路径URL地址
              This.imgSrc = tmpPath;            })
          },
          function (error) { //捕获图像失败回调
            console.log("捕获图像失败: " + error.message);
          }, {
            resolution: res,
            format: fmt
          }
      );
    }

二、vue中使用百度地图定位

1.去百度地图JavaScript申请一个AK密钥

2.写一个map.js 位置随意

export function MP(ak) {
    return new Promise(function (resolve, reject) {
        window.onload = function () {
            resolve(BMap)
        }
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
        script.onerror = reject;
        document.head.appendChild(script);
    })
}

3.在需要用到定位的组件中引入刚才的js（位置找对）

import {MP} from '@/map.js'

4.准备工作

<template>
  <div>
    <button @click="getLocation">开始定位</button>
    <div id="allmap"></div>
  </div>
</template>

data () {
    return {
      ak:'', // 这里填入第一步申请的AK密钥
      BMap:''
    }
  },

5.vue组件生命周期开始时给BMap赋值

  mounted(){
    this.$nextTick(function() {
      var _this = this;
      MP(_this.ak).then(BMap => {
         _this.BMap = BMap;
      })
    })
  },

6.定位具体方法实现

  methods:{
    getLocation(){      // 百度地图API功能
      //获取当前位置
      var address = null;//显示文字地址
      var geolocation = new BMap.Geolocation();//new地图实例
      geolocation.getCurrentPosition(function(r) {//获得当前位置
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {//位置获取成功
          console.log('您的位置：'+r.point.lng+','+r.point.lat);//打印经纬度
          var gc = new BMap.Geocoder();        
          gc.getLocation(r.point, function(rs) {
            var addComp = rs.addressComponents;
            address =
                addComp.province +
                addComp.city +
                addComp.district +
                addComp.street +
                addComp.streetNumber; //获取地址
            console.log(address);//打印地址
          });
        } else {
          alert("failed" + this.getStatus());
        }
      });
    }
  },

三、利用canvas给图片上水印

1.准备工作

<template>
  <div>
    <img id="myimg" :src="imgUrl" alt="">
  </div>
</template>

  data () {
    return {
      imgUrl: '',
    }
  },

2。加水印方法

    //加水印
    waterMarker({
                url = '',//传入的图片地址
                content = '',//传入的内容
                cb = null,//返回的base64Url
              } = {}) {
      // 创建所需要添加水印的img图片
      const img = new Image()
      img.src = url
      img.crossOrigin = 'anonymous'//允许跨域请求
      img.onload = function () {
        // 创建canvas，并将创建的img绘制成canvas
        const canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        const ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0) //在画布的哪个位置开始画图
        ctx.font = '100px Microsoft Yahei'//设置当前字体属性
        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'//设置颜色白色透明
        ctx.fillText(content, 50, 50)//加文字水印
        // 将绘制完成的canvas转换为base64的地址
        const base64Url = canvas.toDataURL()
        cb && cb(base64Url)
      }
    }

4.调用方法

    this.getImgUrl({
      url: '',//这里是图片路径
      content: '',//这里填入水印内容
      cb: (base64Url) => {
        this.imgUrl = base64Url
      }
    })

四、整合代码

这里只实现了拍照加水印

<template>
  <div class="mui-content">
    <button @click="galleryImg">从相册选取</button>
    <button @click="captureImage">拍照</button>
    <div class="imgBox">
      <img :src="imgSrc">
    </div>
  </div>
</template>

<script>
import {MP} from "@/map";

export default {
  name: 'TakePhoto',
  data() {
    return {
      imgSrc: '', //展示的图片路径,
      ak: 'AWMEtAfiYaEV1di4zq8vIHRIXe2u2KIO', // 这里就是百度地图密钥
      BMap: '',
      longitude: '',
      latitude: ''
    }
  },
  mounted() {
    this.$nextTick(function () {
      var _this = this;
      MP(_this.ak).then(BMap => {
        _this.BMap = BMap;
      })
    })
  },
  methods: {
    // 从相册中选取图片
    galleryImg() {
      let This = this
      console.log("从相册中选择图片:");
      plus.gallery.pick(function (path) { //从相册中选择图片
        This.imgSrc = path;
        console.log("相册中照片的位置" + path);
      }, function (e) { //取消选择图片
        console.log("取消选择图片");
      }, {
        filter: "image"
      });
    },
    // 拍照
    async captureImage() {
      let This = this
      //开始定位 给经纬度复制
      console.log("进入到定位")
      var geolocation = new BMap.Geolocation();
      await geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          This.longitude = r.point.lng;
          This.latitude = r.point.lat;
          console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
        } else {
          alert("定位失败" + this.getStatus());
        }
      });
      var cmr = plus.camera.getCamera(); //获取摄像头管理对象
      var res = cmr.supportedImageResolutions[0]; //字符串数组，摄像头支持的拍照分辨率
      var fmt = cmr.supportedImageFormats[0]; //字符串数组，摄像头支持的拍照文件格式
      console.log("拍照分辨率: " + res + ", 拍照文件格式: " + fmt);
        cmr.captureImage(function (path) { //进行拍照操作
            // 通过URL参数获取目录对象或文件对象
              plus.io.resolveLocalFileSystemURL(path, function (entry) {
              var tmpPath = entry.toLocalURL(); //获取目录路径转换为本地路径URL地址
                // 给图片加水印
                This.getImgUrl({
                  url: tmpPath,//图片的url
                  content: '经度：' + This.longitude +'  纬度:' + This.latitude,//水印的信息
                  cb: (base64Url) => {
                    // 使用两种方法设置显示img的src都可以
                    // document.getElementById('myimg').src = base64Url
                    This.imgSrc = base64Url
                  }
                })
            })
          },
          function (error) { //捕获图像失败回调
            console.log("捕获图像失败: " + error.message);
          }, {
            resolution: res,
            format: fmt
          }
      );
    },
    //定位
    dingwei() {
      // 百度地图API功能
      //获取当前位置
      console.log("进入到定位")
      var that = this;
      // var address = null;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          that.longitude = r.point.lng;
          that.latitude = r.point.lat;
          console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
        } else {
          alert("定位失败" + this.getStatus());
        }
      });
    },
    //加水印
    getImgUrl({
                url = '',
                content = '我是默认的水印参数',
                cb = null,
              } = {}) {
      // 创建所需要添加水印的img图片
      const img = new Image()
      img.src = url
      img.crossOrigin = 'anonymous'
      img.onload = function () {
        // 创建canvas，并将创建的img绘制成canvas
        const canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        const ctx = canvas.getContext('2d')

        ctx.drawImage(img, 0, 0)
        ctx.font = '100px Microsoft Yahei' //设置或返回文本内容的当前字体属性
        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
        ctx.fillText(content, 250, 200)
        // 将绘制完成的canvas转换为base64的地址
        const base64Url = canvas.toDataURL()
        cb && cb(base64Url)
      }
    }
  }
}
</script>

<style scoped>
.imgBox {
  width: 200px;
  height: 250px;
}

.imgBox img {
  width: 100%;
  height: 100%;
}
</style>