效果图

template

下方的image图片自行寻找替换！

<template>
  <view>
    <camera
      v-if="!tempImagePath && cameraHeight !== 0"
      :resolution="'high'"
      :frame-size="'large'"
      :device-position="device"
      :flash="flash"
      :style="{
   
        position: 'fixed',
        top: '0',
        width: cameraWidth + 'px',
        height: cameraHeight + 'px',
      }"
    ></camera>
    <image
      v-else
      :src="tempImagePath"
      mode="widthFix"
      style="width: 100%"
    ></image>

    <view class="watermark" v-if="cameraHeight !== 0">
      <view class="time">
        <text class="times-r">
          {
   {
    time }}
        </text>
        <text class="times-date">
          <text class="year-date">
            {
   {
    date }}
          </text>
          <text class="weeks-date">
            {
   {
    week }}
          </text>
        </text>
      </view>
      <view class="location_box">
        <view class="location">{
   {
    address }}</view>
      </view>
    </view>

    <canvas
      type="2d"
      id="canvas"
      :style="{
   
        position: 'fixed',
        top: '-10000px',
        left: '-10000px',
        width: canvasWidth + 'px',
        height: canvasHeight + 'px',
      }"
    ></canvas>

    <view class="handle" id="myContainer">
      <button class="handle_card" @click="chooseLocation">
        <image
          class="handle_card_icon"
          :src="require('./image/wz.png')"
          mode="widthFix"
        ></image>
        <view class="handle_card_name">定位</view>
      </button>
      <button class="handle_card" @click="setDevice">
        <image
          class="handle_card_icon"
          :src="require('./image/qh.png')"
          mode="widthFix"
        ></image>
        <view class="handle_card_name">切换</view>
      </button>
      <button class="handle_ps" @click="takePhoto">
        <image
          class="handle_ps_image"
          :src="require('./image/ps.png')"
          mode="widthFix"
        ></image>
        <view class="handle_ps_name">拍摄</view>
      </button>
      <button class="handle_card" @click="setFlash">
        <image
          class="handle_card_icon"
          :src="require('./image/sd.png')"
          mode="widthFix"
        ></image>
        <view class="handle_card_name">闪光</view>
      </button>