水印相机

2022-05-25 10:49:43 +08:00
parent 7beea2d1f8
commit 7cb7c47811
8 changed files with 84 additions and 39 deletions
--- a/src/saas/AppCountryAlbum/Watermark.vue
+++ b/src/saas/AppCountryAlbum/Watermark.vue
@@ -1,22 +1,24 @@
 <template>
-  <div class="photo" ref="waterMarker" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}">
+  <div class="photo" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}" @click="isHide = true">
    <div class="photo-top" data-html2canvas-ignore>
      <image src="./images/close.png" @click="back" />
      <div class="photo-top__middle" @click="isShowAlbum = true">
        <span>保存至：{{ albumName || '默认相册' }}</span>
        <image src="./images/to-right.png" />
      </div>
-      <span @click="save">保存</span>
+      <span @click.stop="save">保存</span>
    </div>
-    <image :src="img" mode="aspectFit" />
-    <div class="watermark" v-if="currIndex > -1 && currWatermarkConfig.length">
-      <component :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component>
+    <div ref="waterMarker" class="waterMarker-wrapper" :style="{height: canvasHeight + 'px'}">
+      <image class="waterMarker-img" :src="img" mode="widthFix" @load="onImgLoad" />
+      <div class="watermark" :style="{left: x + 'px', top: y + 'px' }" v-if="currIndex > -1 && currWatermarkConfig.length" @touchstart="onTouchstart" @touchmove="onTouchmove">
+        <component :is="'Watermark' + (currIndex + 1)" :config="currWatermarkConfig"></component>
+      </div>
    </div>
    <div class="photo-bottom" data-html2canvas-ignore>
      <div class="photo-bottom__top">
-        <image src="./images/clear.png" @click="isHide = true, currIndex = -1" />
+        <image src="./images/clear.png" @click.stop="isHide = true, currIndex = -1" />
        <h2>水印</h2>
-        <span @click="isHide = true">确定</span>
+        <span @click.stop="isHide = true">确定</span>
      </div>
      <div class="waterlist">
        <div
@@ -24,22 +26,22 @@
          :class="[currIndex === index ? 'active' : '']"
          v-for="(item, index) in watermarkList"
          :key="item.id"
-          @click="currIndex = index">
+          @click.stop="currIndex = index">
          <image :src="item.thum" mode="aspectFill" />
          <div class="water-item__bottom">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="photo-tabbar"  data-html2canvas-ignore>
-      <div class="item" @click="back">
+      <div class="item" @click.stop="back">
        <image src="./images/fanhui.png" />
        <div>返回</div>
      </div>
-      <div class="item" @click="isHide = false, currIndex = 0">
+      <div class="item" @click.stop="isHide = false">
        <image src="./images/shuiyin.png" />
        <div>水印</div>
      </div>
-      <div class="item" @click="save">
+      <div class="item" @click.stop="save">
        <image src="./images/shangchuan.png" />
        <div>上传</div>
      </div>
@@ -88,7 +90,12 @@
        watermarkList: [],
        isShowAlbum: false,
        albumList: [],
-        address: {}
+        address: {},
+        x: 32,
+        y: 200,
+        startX: 0,
+        startY: 0,
+        canvasHeight: 0
      }
    },

@@ -123,6 +130,35 @@
    methods: {
      ...mapActions(['injectJWeixin']),

+      onImgLoad () {
+        const img = document.querySelector('.waterMarker-img')
+
+        this.canvasHeight = img.clientHeight
+      },
+
+      onTouchstart (e) {
+        const isMobile = e.type !== 'mousemove'
+        const watermark = document.querySelector('.watermark')
+        if (isMobile) {
+          this.startX = e.touches[0].clientX - Number((watermark.style.left).replace('px', ''))
+          this.startY = e.touches[0].clientY - Number((watermark.style.top).replace('px', ''))
+        } else {
+          this.startX = e.clientX - Number((watermark.style.left).replace('px', ''))
+          this.startY = e.clientY -Number((watermark.style.top).replace('px', ''))
+        }
+      },
+
+      onTouchmove (e) {
+        const isMobile = e.type !== 'mousemove'
+        if (isMobile) {
+          this.x = e.touches[0].clientX - this.startX
+          this.y = e.touches[0].clientY - this.startY
+        } else {
+          this.x = e.clientX - this.startX
+          this.y = e.clientY - this.startY
+        }
+      },
+
      save () {
        this.isHide = true
        this.$loading()
@@ -268,7 +304,7 @@
    position: relative;
    width: 100%;
    height: 800px;
-    background: #444;
+    background: #333;
    overflow: hidden;

    .newImg {
@@ -280,17 +316,30 @@
      height: 100%;
    }

-    * {
-      box-sizing: border-box;
+    .waterMarker-wrapper {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 1;
+      width: 100%;
+      transform: translate(-50%, -50%);
+      overflow: hidden;
+
+      .waterMarker-img {
+        width: 100%;
+      }
+
+      .watermark {
+        position: absolute;
+        left: 32px;
+        z-index: 111;
+        color: #FFFFFF;
+        font-size: 28px;
+      }
    }

-    .watermark {
-      position: fixed;
-      left: 32px;
-      bottom: 512px;
-      z-index: 111;
-      color: #FFFFFF;
-      font-size: 28px;
+    * {
+      box-sizing: border-box;
    }

    .photo-tabbar {
@@ -301,7 +350,7 @@
      left: 0;
      z-index: 10;
      width: 100%;
-      height: 216px;
+      height: 160px;
      background: #1E1E21;

      .item {
@@ -311,7 +360,7 @@
        image {
          width: 56px;
          height: 56px;
-          margin-bottom: 12px;
+          margin-bottom: 6px;
        }

        div {
@@ -330,6 +379,7 @@
      height: 474px;
      background: #FFFFFF;
      border-radius: 32px 32px 0px 0px;
+      transition: all ease 0.3s;

      .waterlist {
        display: flex;
@@ -460,10 +510,5 @@
        // bottom: 38px;
      }
    }
-
-    & > image {
-      width: 100%;
-      height: 100%;
-    }
  }
 </style>
--- a/src/saas/AppCountryAlbum/components/watermark/Watermark1.vue
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark1.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark1" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark1" @click.stop="linkTo('./WatermarkConfig')">
    <div class="top">
      <h2>打卡记录</h2>
      <p>{{ time }}</p>
--- a/src/saas/AppCountryAlbum/components/watermark/Watermark2.vue
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark3" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark3" @click.stop="linkTo('./WatermarkConfig')">
    <div class="top">
      <h2 v-if="isShowTitle">{{ title }}</h2>
      <span v-if="isShowName">{{ name }}</span>
--- a/src/saas/AppCountryAlbum/components/watermark/Watermark3.vue
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark3.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark2" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark2" @click.stop="linkTo('./WatermarkConfig')">
    <div class="top">
      <div class="left">
        <h2>{{ time }}</h2>
@@ -26,7 +26,7 @@
        time: '',
        week: '',
        timer: null,
-        address: '武汉市·绿地蓝海A座',
+        address: '',
        remark: '',
        configList: [],
        isShowRemark: false
--- a/src/saas/AppCountryAlbum/components/watermark/Watermark4.vue
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark4.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark6" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark6" @click.stop="linkTo('./WatermarkConfig')">
    <div class="title">
      <h2>{{ title }}</h2>
    </div>
@@ -28,7 +28,7 @@
        timer: null,
        week: '',
        title: '定格在这一刻',
-        address: '武汉市·绿地蓝海A座',
+        address: '',
      }
    },

--- a/src/saas/AppCountryAlbum/components/watermark/Watermark5.vue
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark5.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark4" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark4" @click.stop="linkTo('./WatermarkConfig')">
    <div class="top">
      <image src="./../../images/fangyishuiyin.png" />
      <h2>{{ title }}</h2>
@@ -29,7 +29,7 @@
        week: '',
        timer: null,
        title: '日常消杀',
-        address: '武汉市·绿地蓝海国际A座',
+        address: '',
        configList: [],
        isShowAddress: true,
        isShowDate: true,
--- a/src/saas/AppCountryAlbum/components/watermark/Watermark6.vue
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark6.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark5" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark5" @click.stop="linkTo('./WatermarkConfig')">
    <div class="top">
      <h2>{{ title }}</h2>
      <div class="right">
--- a/src/saas/AppCountryAlbum/components/watermark/Watermark7.vue
+++ b/src/saas/AppCountryAlbum/components/watermark/Watermark7.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Watermark7" @click="linkTo('./WatermarkConfig')">
+  <div class="Watermark7" @click.stop="linkTo('./WatermarkConfig')">
    <image src="../../images/hjws.png" />
    <h2 v-if="isShowTitle">{{ title }}</h2>
    <div class="middle">