樣式圖如上所示

頁(yè)面分為取景框和拍照完成后預(yù)覽，本功能設(shè)計(jì)到，公共上傳組件，相機(jī)也頁(yè)面，獲取定位地址，頁(yè)面中如何用該上傳組件

UI實(shí)現(xiàn)
取景界面分為上下兩個(gè)部分，上部分為camera取景框組件，下部分為操作區(qū)域。

取景框組件上的關(guān)閉和水印，以及拍完照片后的略縮圖展示需要通過(guò)cover-view和cover-image來(lái)展示。

頁(yè)面中的引用

 <my-camera :maxCount="5" :name="1" :editUrl="fileList1" @filesSelected="handleFilesSelected"  @upload="handleUpload" />
   import myCamera from '@/components/camera/index.vue'
 components: {
      myCamera,
    },
     data() {
      return {
        fileList1: [],
        
        }
      }
      //刪除圖片
      handleFilesSelected(index, name) {
        this[`fileList${name}`].splice(index, 1);
      },
      //圖片上傳
      handleUpload(data) {
        this[`fileList${data.name}`] = data.fileList
      }

結(jié)構(gòu)代碼如下：
?

<view class="u-upload">
    <view class="u-list-item u-preview-wrap" v-for="(item, index) in fileList" :key="index" :style="{
			width: 150,
			height: 150
		}">
      <view class="u-delete-icon" @click="deleteItem(index)" :style="{
					background: '#000'
				}">
        <u-icon class="u-icon" name="close" size="10" color="#ffffff"></u-icon>
      </view>
      <image @click="lookImg(index)" class="u-preview-image" :src="item.url"></image>
      <view class="u-upload__status" v-if="item.status === 'uploading'">
        <view class="u-upload__status__icon">
          <u-icon v-if="item.status === 'failed'" name="close-circle" color="#ffffff" size="25" />
          <u-loading-icon size="22" mode="circle" color="#ffffff" v-else />
        </view>
        <text v-if="item.message" class="u-upload__status__message">{{ item.message }}</text>
      </view>
    </view>
    <view style="display: inline-block;" @click="gotoCamera" v-if="fileList.length < maxCount">
      <slot name="addBtn"></slot>
      <view class="u-list-item u-add-wrap" hover-class="u-add-wrap__hover" hover-stay-time="150" :style="{
					width: 150,
					height: 150
				}">
        <u-icon name="camera" size="30"></u-icon>
      </view>
    </view>
    <u-popup :show="show" mode="bottom" @close="close">
      <view style="height: 260rpx;">
        <view class="popup_item" @click="goCamera()">拍照</view>
        <view class="popup_item" @click="goAlbum()">相冊(cè)</view>
      </view>
    </u-popup>
    <view style="position: absolute;top: -999999px;">
      <view><canvas :style="{ width: w, height: h }" canvas-id="firstCanvas"></canvas></view>
    </view>
  </view>

?樣式css

<style scoped lang="scss">
  .u-upload {
    // @include vue-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .u-add-tips {
    margin-top: 20rpx;
    line-height: 40rpx;
  }

  .u-delete-icon {
    position: absolute;
    top: 4rpx;
    right: 4rpx;
    z-index: 10;
    background-color: red;
    border-radius: 100rpx;
    width: 32rpx;
    height: 32rpx;
    // @include vue-flex;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .u-icon {
    // @include vue-flex;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .u-list-item {
    width: 160rpx;
    height: 160rpx;
    overflow: hidden;
    margin: 10rpx;
    background: rgb(244, 245, 246);
    position: relative;
    border-radius: 10rpx;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
    justify-content: center;
  }

  .u-preview-wrap {
    border: 1px solid rgb(235, 236, 238);
  }

  .u-preview-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }

  .popup_item {
    width: 100%;
    height: 130rpx;
    text-align: center;
    line-height: 130rpx;
    border-bottom: 1px solid #eaeef1;
  }

  .u-upload__status {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    @include flex(column);
    align-items: center;
    justify-content: center;
  }

  .u-upload__status__icon {
    position: relative;
    z-index: 1;
  }

  .u-upload__status__message {
    font-size: 12px;
    color: #FFFFFF;
    margin-top: 5px;
  }
</style>

公共上傳組件數(shù)據(jù)的綁定

 import {
    props
  } from '../../uni_modules/uview-ui/libs/mixin/mixin';
  import getCurrentLngAndLat from "@/utils/getAddressLocation.js"
  export default {
    name: "myCamera",
    props: {
      maxCount: {
        type: Number,
        default: 1
      },
      name: {
        type: String,
        required: true
      },
      editUrl: {
        type: Array,
        default: () => {
          []
        }
      },
      type: {
        type: String,
        default: () => 'order'
      },
      customStyle: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        fileList: [],
        show: false,
        w: '',
        h: '',
        nowTime: '', //日期
        nowTime2: '', //時(shí)間
        nowWeek: '', // 周幾
        address: '', //當(dāng)前地址信息
      }
    },

公共組件部分js實(shí)現(xiàn)：分為拍照與相冊(cè)中上傳，包括刪除圖片，預(yù)覽圖片，保存圖片到相冊(cè)

 watch: {
      editUrl: {
        immediate: true,
        handler(newVal, oldVal) {
          if (this.editUrl[0]?.url === '' || this.editUrl[0]?.url === null) {
            this.fileList = [];
          } else {
            this.fileList = this.editUrl
          }
        }
      }
    },
    methods: {
      goCamera() {
        uni.$u.route(`/pages/camera/camera?name=${this.name}`);
        this.close();
      },
      async goAlbum() {
        this.close();
        this.getTime();
        const res1 = await getCurrentLngAndLat();
        this.address = res1.currentSignAddress;
        const res = await this.chooseFile();
        this.afterRead(res)
      },
      //選擇圖片
      chooseFile() {
        return new Promise((resolve, reject) => {
          uni.chooseImage({
            count: this.maxCount ? this.maxCount : 1, //默認(rèn)9
            sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
            sourceType: ['album'], //從相冊(cè)選擇
            success: res => resolve(this.formatImage(res)),
          });
        })
      },
      //處理圖片
      formatImage(res) {
        return res.tempFiles.map(item => ({
          ...this.pickExclude(item, ['path']),
          type: 'image',
          url: item.path,
          thumb: item.path,
          size: item.size,
        }))
      },
      pickExclude(obj, keys) {
        // 某些情況下，type可能會(huì)為
        if (!['[object Object]', '[object File]'].includes(Object.prototype.toString.call(obj))) {
          return {}
        }
        return Object.keys(obj).reduce((prev, key) => {
          if (!keys.includes(key)) {
            prev[key] = obj[key]
          }
          return prev
        }, {})
      },
      close() {
        this.show = false;
      },
      // 跳轉(zhuǎn)到拍照頁(yè)面
      gotoCamera() {
        this.show = true;
      },
      async afterRead(file) {
        const lists = [].concat(file);
        const fileListLen = this.fileList.length;
        for (let i = 0; i < lists.length; i++) {
          const item = lists[i];
          let waterUrl = await this.addWatermark(item.url);
          this.fileList.push({
            ...item,
            status: "uploading",
            message: "上傳中"
          });
          try {
            const result = await this.uploadFilePromise(waterUrl);
            const uploadedItem = Object.assign({}, item, {
              status: "success",
              message: "",
              url: result
            });
            this.fileList.splice(fileListLen + i, 1, uploadedItem);
          } catch (error) {
            const failedItem = Object.assign({}, item, {
              status: "fail",
              message: "上傳失敗"
            });
            this.fileList.splice(fileListLen + i, 1, failedItem);
          }
        }
        this.$emit("upload", {
          name: this.name,
          fileList: this.fileList
        });
      },
      //上傳圖片
      uploadFilePromise(url) {
        let host = "";
        // #ifndef H5
        let envVs = uni.getAccountInfoSync().miniProgram.envVersion;
        if (envVs === 'release') {
          host = uni.getStorageSync('normal_url')
        } else if (envVs === 'trial') {
          host = uni.getStorageSync('exp_url')
        } else if (envVs === 'develop') {
          host = uni.getStorageSync('test_url')
        }
        // #endif
        return new Promise((resolve, reject) => {
          uni.uploadFile({
            url: host + '上傳圖片接口的url', // 僅為示例，非真實(shí)的接口地址
            filePath: url,
            name: 'file',
            formData: {
              type: 'order',
              lat: 23.129163,
              lng: 113.264435
            },
            header: {
              Authorization: 'Bearer ' + uni.getStorageSync('token')
            },
            success: (res) => {
              setTimeout(() => {
                let arr = JSON.parse(res.data)
                resolve(arr.data?.url)
              }, 1000)
            },
          })
        })
      },
      // 刪除圖片
      deleteItem(index) {
        let that = this;
        uni.showModal({
          title: '提示',
          content: '您確定要?jiǎng)h除此張照片嗎？',
          success: async (res) => {
            if (res.confirm) {
              this.$emit("filesSelected", index, this.name);
            }
          }
        });
      },
      //查看圖片
      lookImg(index) {
        let photoList = this.editUrl.map(item => {
          return item.url;
        });
        // 預(yù)覽圖片
        uni.previewImage({
          current: index,
          urls: photoList,
        });
      },
      //添加水印
      async addWatermark(img) {
        var that = this
        let res1 = await new Promise((resolve, reject) => {
          uni.getImageInfo({
            src: img,
            success: (res) => {
              that.w = res.width / 3 + 'px';
              that.h = res.height / 3.01 + 'px';
              let ctx = uni.createCanvasContext('firstCanvas', this); /** 創(chuàng)建畫(huà)布 */
              //將圖片src放到cancas內(nèi)，寬高為圖片大小
              ctx.drawImage(img, 0, 0, res.width / 3, res.height / 3);
              // ctx.setFontSize(18);
              ctx.setFontSize(Math.floor(res.width * 0.04));
              ctx.setFillStyle('#fff');
              ctx.setTextAlign('center');
              let textToWidth = (res.width / 3) * 0.5;
              let textToHeight = (res.height / 3) * 0.86;
              ctx.fillText(that.nowTime2, textToWidth, textToHeight);
              ctx.setFontSize(Math.floor(res.width * 0.015));
              let textToHeight2 = (res.height / 3) * 0.91;
              ctx.fillText(that.nowTime + ' ' + that.nowWeek, textToWidth, textToHeight2);
              ctx.setFontSize(Math.floor(res.width * 0.01));
              let textToHeight3 = (res.height / 3) * 0.95;
              ctx.fillText(' ?? ' + that.address, textToWidth, textToHeight3);
              ctx.draw(false, () => {
                // 將畫(huà)布轉(zhuǎn)化為圖片
                uni.canvasToTempFilePath({
                  canvasId: 'firstCanvas',
                  success: (res) => {
                    resolve(res.tempFilePath);
                  },
                  fail: (err) => {
                    reject(err);
                  }
                }, this);
              });
            }
          });
        });
        return (res1);
      },
       //獲取時(shí)間
      getTime: function() {
        var weekarr = new Array("日", "一", "二", "三", "四", "五", "六");
        var date = new Date(),
          year = date.getFullYear(),
          month = date.getMonth() + 1,
          day = date.getDate(),
          hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
          minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
          second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        month >= 1 && month <= 9 ? (month = "0" + month) : "";
        day >= 0 && day <= 9 ? (day = "0" + day) : "";
        var timer = year + '-' + month + '-' + day;
        var timer3 = hour + ':' + minute + ':' + second;
        var timer2 = hour + ':' + minute
        this.nowTime = timer;
        this.nowTime2 = timer2;
        this.nowTime3 = timer3;
        this.nowWeek = '星期' + weekarr[date.getDay()];
      },

    }
  

相機(jī)頁(yè)面的全部代碼：（相機(jī)頁(yè)面給圖片加水印與選擇圖片加水印可以抽離出一個(gè)公共的方法，時(shí)間緊任務(wù)重我就沒(méi)。。。）

<template>
  <view>
    <camera :device-position="device" :flash="flash" @error="error"
      :style="{ width: '100%',position: 'relative', height: getHeight + 'px' }">
      <cover-view class="topBox">
        <cover-view class="topItem">{{nowWeek}}</cover-view>
        <cover-view class="topItem">{{nowTime +' '+nowTime2}}</cover-view>
        <cover-view class="topItem">{{address}}</cover-view>
      </cover-view>
      <cover-image @click="xzBtn" class="xzImg" src="https://cdn.zhoukaiwen.com/xz.png"></cover-image>
      <cover-view class="cameraBtn" @click="takePhoto">
        <cover-view class="cameraBtn2"></cover-view>
      </cover-view>
    </camera>
    <view style="position: absolute;top: -999999px;">
      <view><canvas :style="{ width: w, height: h }" canvas-id="firstCanvas"></canvas></view>
    </view>
  </view>
</template>

<script>
  import getCurrentLngAndLat from "@/utils/getAddressLocation.js"
  export default {
    data() {
      return {
        getHeight: '200',
        device: 'back', //前置或后置攝像頭，值為front, back
        flash: 'off', //閃光燈，值為auto, on, off
        nowTime: '', //日期
        nowTime2: '', //時(shí)間
        nowWeek: '', // 周幾
        address: '', //當(dāng)前地址信息
        city: '',
        district: '',
        name: '',
        imgList: [],
        imgListData: '',
        rreportShow: false, //選擇照片備注內(nèi)容彈窗
        src: '',
        w: '',
        h: ''
      }
    },
    async onLoad(options) {
      const that = this;
      uni.getSystemInfo({
        success: function(res) {
          that.getHeight = res.windowHeight;
        }
      });
      this.getTime();
      const res = await getCurrentLngAndLat();
      this.address = res.currentSignAddress;
      this.name = +options.name
    },
    methods: {
      xzBtn() {
        if (this.device == 'front') {
          this.device = 'back'
        } else {
          this.device = 'front'
        }
      },
      // 點(diǎn)擊拍照
      takePhoto() {
        var that = this;
        if (this.imgList.length < 3) {
          const ctx = uni.createCameraContext();
          ctx.takePhoto({
            quality: 'high',
            success: (ress) => {
              var tempImagePath = ress.tempImagePath;
              // 獲取圖片信息
              uni.getImageInfo({
                src: ress.tempImagePath,
                success: res => {
                  that.w = res.width / 3 + 'px';
                  that.h = res.height / 3.01 + 'px';
                  let ctx = uni.createCanvasContext('firstCanvas'); /** 創(chuàng)建畫(huà)布 */
                  //將圖片src放到cancas內(nèi)，寬高為圖片大小
                  ctx.drawImage(ress.tempImagePath, 0, 0, res.width / 3, res.height / 3);
                  ctx.setFontSize(18);
                  ctx.setFillStyle('#FFFFFF');
                  ctx.setTextAlign('center');
                  // 		// ctx.rotate(30 * Math.PI / 180);//0.03
                  let textToWidth = (res.width / 3) * 0.5;
                  let textToHeight = (res.height / 3) * 0.9;
                  ctx.fillText(that.nowTime2, textToWidth, textToHeight);
                  ctx.setFontSize(12);
                  let textToHeight2 = (res.height / 3) * 0.94;
                  ctx.fillText(that.nowTime + ' ' + that.nowWeek, textToWidth, textToHeight2);
                  ctx.setFontSize(7);
                  let textToHeight3 = (res.height / 3) * 0.98;
                  ctx.fillText(' ?? ' + that.address, textToWidth, textToHeight3);
                  ctx.draw(false, () => {
                    setTimeout(() => {
                      uni.canvasToTempFilePath({
                        canvasId: 'firstCanvas',
                        success: async (res1) => {
                          tempImagePath = res1.tempFilePath;
                          const result = await this.uploadFilePromise(tempImagePath, {
                            lat: 23.129163,
                            lng: 113.264435
                          })
                          let pages = getCurrentPages();
                          let prevPage = pages[pages.length - 2];
                          // 將數(shù)據(jù)返回上一個(gè)頁(yè)面
                          prevPage.$vm[`fileList${this.name}`].push({
                            url: result
                          })
                          // setTimeout(() => {
                          uni.navigateBack();
                          // }, 500)
                        }
                      });
                    }, 500);
                  });
                }
              });
            },
            fail: (err) => {
              console.log(err, 'errhhhhhhhhhhhh')
            }
          });
        } else {
          uni.showToast({
            title: '最大上傳3張照片',
            duration: 2000,
            icon: 'none'
          });
        }
      },
      uploadFilePromise(url, lngLat) {
        // 初始化請(qǐng)求配置項(xiàng)
        let host = "";
        // #ifndef H5
        let envVs = uni.getAccountInfoSync().miniProgram.envVersion;
        if (envVs === 'release') {
          host = uni.getStorageSync('normal_url')
        } else if (envVs === 'trial') {
          host = uni.getStorageSync('exp_url')
        } else if (envVs === 'develop') {
          host = uni.getStorageSync('test_url')
        }
        // #endif
        return new Promise((resolve, reject) => {
          uni.showLoading({
            title: '上傳中'
          });
          uni.uploadFile({
            url: host + '上傳圖片接口url', // 僅為示例，非真實(shí)的接口地址
            filePath: url,
            name: 'file',
            formData: {
              type: 'order',
              lat: lngLat.lat,
              lng: lngLat.lng,
            },
            header: {
              Authorization: 'Bearer ' + uni.getStorageSync('token')
            },
            success: (res) => {
              // setTimeout(() => {
              let arr = JSON.parse(res.data)
              if (res.data.code == 0) {
                uni.$showMsg(res.data.message, 'none')
                uni.hideLoading();
              } else {
                uni.hideLoading();
                uni.$showMsg('上傳成功', 'none')
                resolve(arr.data?.url)
              }
              // }, 1000)
            },
          })
        })
      },

      getTime: function() {
        var weekarr = new Array("日", "一", "二", "三", "四", "五", "六");
        var date = new Date(),
          year = date.getFullYear(),
          month = date.getMonth() + 1,
          day = date.getDate(),
          hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
          minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
          second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        month >= 1 && month <= 9 ? (month = "0" + month) : "";
        day >= 0 && day <= 9 ? (day = "0" + day) : "";
        var timer = year + '-' + month + '-' + day;
        var timer3 = hour + ':' + minute + ':' + second;
        var timer2 = hour + ':' + minute
        this.nowTime = timer;
        this.nowTime2 = timer2;
        this.nowTime3 = timer3;
        this.nowWeek = '星期' + weekarr[date.getDay()];
      },
      error(e) {
        console.log(e.detail);
      },
    }
  }
</script>

<style lang="scss">
  .topBox {
    width: 750rpx;
    box-sizing: border-box;
    // padding-bottom: 200rpx;
    // padding-left: 30rpx;
    color: #EEEEEE;
    font-size: 34rpx;
    position: absolute;
    bottom: 20%;
    /* 設(shè)置小盒子距離大盒子底部的距離為0 */
    left: 50%;
    /* 設(shè)置小盒子距離大盒子左側(cè)的距離為50%，即水平居中 */
    transform: translateX(-50%);
    text-align: center;

    /* 通過(guò)transform將小盒子水平居中 */
    .topItem {
      width: 100%;
      white-space: pre-wrap;
      margin-bottom: 15rpx;
    }
  }

  .xzImg {
    width: 52rpx;
    height: auto;
    position: absolute;
    right: 44rpx;
    bottom: 160rpx;
  }


  .cameraBtn {
    width: 120rpx;
    height: 120rpx;
    line-height: 120rpx;
    border: 6rpx #FFFFFF solid;
    border-radius: 50%;
    padding: 8rpx;
    position: absolute;
    left: calc(50% - 60rpx);
    bottom: 120rpx;
  }

  .cameraBtn2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #FFFFFF;
    text-align: center;
    color: #007AFF;
  }
</style>

獲取當(dāng)前地址的方法(getLocation接口記得在微信公眾平臺(tái)申請(qǐng)一下）

// 獲取當(dāng)前經(jīng)緯度
const getCurrentLngAndLat = () => {
  return new Promise((resolve, reject) => {
    uni.getLocation({
      type: 'wgs84',
      success: res => {
        let lng = res.longitude.toString()
        let lat = res.latitude.toString()
        uni.request({
          method: 'GET',
          url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=你的key`,
          success: address => {
            const { standard_address } = address.data.result.formatted_addresses
            resolve({
              lng,
              lat,
              currentSignAddress: standard_address
            })
          },
          fail: errAddress => {
            reject({ message: errAddress.message })
          }
        })
      },
      fail: err => {
        getCurrentAddress()
      }
    })
  })
}
// 授權(quán)地理位置
const getCurrentAddress = () => {
  uni.authorize({
    scope: 'scope.userLocation',
    success() {
      getCurrentLngAndLat()
    },
    fail(err) {
      uni.showModal({
        title: '請(qǐng)您授權(quán)地理位置',
        content: '如需正常使用此小程序打卡功能，請(qǐng)您按確定并在設(shè)置頁(yè)面授權(quán)地理位置授權(quán)',
        confirmText: '確定',
        success: res => {
          if (res.confirm) {
            uni.openSetting({
              success: function(res) {
                if (res.authSetting['scope.userLocation']) {
                  uni.showToast({
                    title: '授權(quán)成功',
                    icon: 'none'
                  })
                  getCurrentLngAndLat()
                } else {
                  // 不允許
                  uni.showToast({
                    title: '授權(quán)失敗',
                    icon: 'none'
                  })
                }
              },
              fail: err => {
                console.log('err:', err)
              }
            })
          } else { //取消
            uni.showToast({
              title: '取消授權(quán)',
              icon: 'none'
            })
          }
        },
        fail: err => {
          console.log('err:', err)
        }
      })
    }
  })
}


export default getCurrentLngAndLat

代碼參考：uniapp自定義水印相機(jī)_vue+uniapp 拍照+水印-CSDN博客?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-850836.html

到了這里，關(guān)于uniapp+uView 實(shí)現(xiàn)自定義水印相機(jī)，拍完照片給圖片加水印，從相冊(cè)選擇圖片加水印功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！