Canvas zeichnet ein neues Bild auf ein vorhandenes Bild, um eine wasserzeichenähnliche Funktion zu erreichen

Bild

erklären

canvasBeschriftungen werden zum Zeichnen von Bildern verwendet (per Skript, normalerweise JavaScript).

Das Element selbst verfügt jedoch canvasüber keine Zeichenfunktionen (es ist nur ein Container für Grafiken) – Sie müssen Skripte verwenden, um das eigentliche Zeichnen durchzuführen.

getContext()Die Methode gibt ein Objekt zurück, das Methoden und Eigenschaften zum Zeichnen auf der Leinwand bereitstellt.

Einzelheiten finden Sie unter: https://www.runoob.com/tags/ref-canvas.html

der 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');
          };
        };
      })
    }