Canvas draws a new image onto an existing image to achieve a watermark-like function

picture

explain

canvasLabels are used to draw images (via script, usually JavaScript).

However, canvasthe element itself has no drawing capabilities (it's just a container for graphics) - you must use scripts to do the actual drawing.

getContext()method returns an object that provides methods and properties for drawing on the canvas.

For details, see: https://www.runoob.com/tags/ref-canvas.html

the code

<!-- 水印 -->
 <el-form-item label="水印开关" prop="watermarkFlag">
   <el-switch v-model="siteInfo.watermarkFlag" active-color="#3963bc" active-value="1"
     inactive-value="0" @change="switchChange"></el-switch>
 </el-form-item>
 <template v-if="siteInfo.watermarkFlag === '1'">
   <el-form-item label="上传水印" prop="ossRegionId">
     <UploadWater type="image" :drag="false" v-model:file-list="fileList"
       :waterOpcity="siteInfo.watermarkTransparent" :size="10" />
   </el-form-item>
   <template v-if="fileList.length > 0">
     <el-form-item label="水印位置" prop="watermarkPosition">
       <el-select size="medium" v-model="siteInfo.watermarkPosition" placeholder="水印位置"
         @change="waterPositionChange">
         <el-option value="0" label="平铺"></el-option>
         <el-option value="1" label="横向平铺"></el-option>
         <el-option value="2" label="竖向平铺"></el-option>
         <el-option value="3" label="单一位置"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="单一位置" prop="watermarkSinglePosition" v-if="siteInfo.watermarkPosition === '3'">
       <el-select size="medium" v-model="siteInfo.watermarkSinglePosition" placeholder="单一位置" @change="waterPositionChange">
         <!-- /** 水印单一位置，1左下，3右下，7左上，9右上 */ -->
         <el-option value="7" label="左上角"></el-option>
         <el-option value="9" label="右上角"></el-option>
         <el-option value="1" label="左下角"></el-option>
         <el-option value="3" label="右下角"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="倾斜角度" prop="watermarkIncline"
       v-if="siteInfo.watermarkPosition === '1' || siteInfo.watermarkPosition === '2'">
       <el-slider style="width: 300px;" v-model="siteInfo.watermarkIncline" max="360" @change="waterPositionChange" />
     </el-form-item>
     <el-form-item label="预览图" v-if="siteInfo.watermarkPosition">
       <canvas id="waterCanvas" width="500" height="500" v-if="isShow"></canvas>
       <canvas id="waterCanvasTwo" width="500" height="500" v-else></canvas>
     </el-form-item>
     <el-form-item label="透明度" prop="watermarkTransparent" v-if="siteInfo.watermarkPosition">
       <el-input-number v-model="siteInfo.watermarkTransparent" :step="0.1" :min="0" :max="1" @change="waterPositionChange" />
     </el-form-item>
   </template>

// 水印位置改变
    const isShow = ref(false)
    const waterPositionChange = (e) => {
    
    
      console.log(fileList.value);
      isShow.value = !isShow.value
      // 等dom节点挂载之后
      setTimeout(() => {
    
    
        // 创建一个画布
        if (isShow.value) {
    
    
          canvas = document.getElementById("waterCanvas");
        } else {
    
    
          console.log(isShow.value, 'waterCanvasTwo');
          canvas = document.getElementById("waterCanvasTwo");
        }
        setTimeout(() => {
    
    
          mergeImages()
        }, 200)
      }, 200)
    }

    // 水印设置
    var canvas;
    const mergeImages = (file) => {
    
    
      return new Promise((resolve) => {
    
    
        // 获取当前图片的宽和高
        let myWidth = 500
        let myHeight = 500
        const context = canvas.getContext("2d");

        context.clearRect(0,0,myWidth,myHeight) //初始化清除上一次的绘画
        
        // 绘制背景图
        const overlay = new Image();
        overlay.src = 'http://mohua.oss-cn-shenzhen.aliyuncs.com/16674632080942882401467732332544.jpeg'
        overlay.setAttribute("crossOrigin", 'Anonymous')
        overlay.onload = () => {
    
    
          context.drawImage(overlay, 0, 0, myWidth, myHeight); //绘制水印背景图
          // 样版图片
          const template = new Image();
          template.crossOrigin = "anonymous";
          template.src = fileList.value[0]?.url
          console.log(fileList.value[0]?.url, 'fileList.value[0]?.url');
          template.onload = () => {
    
    
            context.globalAlpha = siteInfo.watermarkTransparent; //水印透明度
            // 平铺
            if (siteInfo.watermarkPosition === '0') {
    
    
              context.fillStyle = context.createPattern(template, "repeat"); //水印平铺
              context.fillRect(0, 0, 800, 800); //填充画布
            } else if (siteInfo.watermarkPosition === '1') {
    
    
              // 角度
              if (siteInfo.watermarkIncline !== 0) {
    
    
                context.rotate(siteInfo.watermarkIncline*Math.PI/180);
              }
              context.fillStyle = context.createPattern(template, "repeat-x"); //水印横向平铺
              context.fillRect(0, 0, myWidth, myHeight); //填充画布
            } else if (siteInfo.watermarkPosition === '2') {
    
    
              // 角度
              if (siteInfo.watermarkIncline !== 0) {
    
    
                context.rotate(-siteInfo.watermarkIncline*Math.PI/180);
              }
              context.fillStyle = context.createPattern(template, "repeat-y"); //水印竖向平铺
              context.fillRect(0, 0, myWidth, myHeight); //填充画布
            } else {
    
    
              // 单一位置
              if (siteInfo.watermarkSinglePosition === '7') {
    
    
                context.drawImage(template, 0, 0, 50, 50); //绘制水印位于左上角
              }
              if (siteInfo.watermarkSinglePosition === '9') {
    
    
                context.drawImage(template, 450, 0, 50, 50); //绘制水印位于右上角
              }
              if (siteInfo.watermarkSinglePosition === '1') {
    
    
                context.drawImage(template, 0, 450, 50, 50); //绘制水印位于左下角
              }
              if (siteInfo.watermarkSinglePosition === '3') {
    
    
                context.drawImage(template, 450, 450, 50, 50); //绘制水印位于右下角
              }
            }
            let data = canvas.toDataURL('image/jpeg')
            // console.log(data, 'data');
          };
        };
      })
    }