上传图片添加水印(自定义文字)

<template>

  <div class="flex">

    <div class="optea mr-20">

      <div class="file-upload">

        <p>选择图片</p>

        <el-button type="text" style="color: #c00"

          ><label for="uploads">

            <i class="el-icon-upload2" style="margin-right: 5px"></i>

            选择需要添加水印的图片</label

          ></el-button

        >

        <input

          type="file"

          id="uploads"

          hidden

          accept="image/png, image/jpeg, image/gif, image/jpg"

          @change="uploadImg($event, 1)"

        />

      </div>

      <p>水印文字</p>

      <el-input

        v-model="watermarkOptions.text"

        placeholder="请输入水印内容"

      ></el-input>

      <p>字体颜色</p>

      <el-color-picker v-model="watermarkOptions.color"></el-color-picker>

      <p>旋转角度</p>

      <el-slider

        v-model="watermarkOptions.rotate"

        :min="0"

        :max="360"

      ></el-slider>

      <p>透明度</p>

      <el-slider

        v-model="watermarkOptions.alpha"

        :min="0"

        :max="100"

      ></el-slider>

      <p>文本间距</p>

      <el-slider

        v-model="watermarkOptions.width"

        :min="0"

        :max="100"

      ></el-slider>

      <p>字体大小</p>

      <el-slider

        v-model="watermarkOptions.fontSize"

        :min="0"

        :step="0.5"

        :max="50"

      ></el-slider>

    </div>

    <div>

      <el-button

        @click="handleDown"

        class="download-btn"

        type="primary"

        icon="el-icon-download"

        >下载水印图片</el-button

      >

      <div class="preview" ref="previewImg">

        <img :src="preImg || defaultimg" alt="" />

        <div class="watermark" :style="{ background: paint }"></div>

      </div>

    </div>

  </div>

</template>

<template>

<template>
  <div class="flex">
    <div class="optea mr-20">
      <div class="file-upload">
        <p>选择图片</p>
        <el-button type="text" style="color: #c00"
          ><label for="uploads">
            <i class="el-icon-upload2" style="margin-right: 5px"></i>
            选择需要添加水印的图片</label
          ></el-button
        >
        <input
          type="file"
          id="uploads"
          hidden
          accept="image/png, image/jpeg, image/gif, image/jpg"
          @change="uploadImg($event, 1)"
        />
      </div>
      <p>水印文字</p>
      <el-input
        v-model="watermarkOptions.text"
        placeholder="请输入水印内容"
      ></el-input>
      <p>字体颜色</p>
      <el-color-picker v-model="watermarkOptions.color"></el-color-picker>
      <p>旋转角度</p>
      <el-slider
        v-model="watermarkOptions.rotate"
        :min="0"
        :max="360"
      ></el-slider>
      <p>透明度</p>
      <el-slider
        v-model="watermarkOptions.alpha"
        :min="0"
        :max="100"
      ></el-slider>
      <p>文本间距</p>
      <el-slider
        v-model="watermarkOptions.width"
        :min="0"
        :max="100"
      ></el-slider>
      <p>字体大小</p>
      <el-slider
        v-model="watermarkOptions.fontSize"
        :min="0"
        :step="0.5"
        :max="50"
      ></el-slider>
    </div>
    <div>
      <el-button
        @click="handleDown"
        class="download-btn"
        type="primary"
        icon="el-icon-download"
        >下载水印图片</el-button
      >
      <div class="preview" ref="previewImg">
        <img :src="preImg || defaultimg" alt="" />
        <div class="watermark" :style="{ background: paint }"></div>
      </div>
    </div>
  </div>
</template>

  <div class="flex">

    <div class="optea mr-20">

      <div class="file-upload">

        <p>选择图片</p>

        <el-button type="text" style="color: #c00"

          ><label for="uploads">

            <i class="el-icon-upload2" style="margin-right: 5px"></i>

            选择需要添加水印的图片</label

          ></el-button

        >

        <input

          type="file"

          id="uploads"

          hidden

          accept="image/png, image/jpeg, image/gif, image/jpg"

          @change="uploadImg($event, 1)"

        />

      </div>

      <p>水印文字</p>

      <el-input

        v-model="watermarkOptions.text"

        placeholder="请输入水印内容"

      ></el-input>

      <p>字体颜色</p>

      <el-color-picker v-model="watermarkOptions.color"></el-color-picker>

      <p>旋转角度</p>

      <el-slider

        v-model="watermarkOptions.rotate"

        :min="0"

        :max="360"

      ></el-slider>

      <p>透明度</p>

      <el-slider

        v-model="watermarkOptions.alpha"

        :min="0"

        :max="100"

      ></el-slider>

      <p>文本间距</p>

      <el-slider

        v-model="watermarkOptions.width"

        :min="0"

        :max="100"

      ></el-slider>

      <p>字体大小</p>

      <el-slider

        v-model="watermarkOptions.fontSize"

        :min="0"

        :step="0.5"

        :max="50"

      ></el-slider>

    </div>

    <div>

      <el-button

        @click="handleDown"

        class="download-btn"

        type="primary"

        icon="el-icon-download"

        >下载水印图片</el-button

      >

      <div class="preview" ref="previewImg">

        <img :src="preImg || defaultimg" alt="" />

        <div class="watermark" :style="{ background: paint }"></div>

      </div>

    </div>

  </div>

</template>