canvas将新图像绘制到已有的图像上实现类似水印功能

骑猪看日落 2024-03-17 10:02 24阅读 0赞

#### canvas将新图像绘制到已有的图像上实现类似水印功能 ####

*  图
 *  解释
 *  代码

## 图 ##

![在这里插入图片描述][654142e2d9ed40aaa9acb7faf7811b0c.png]

## 解释 ##

`canvas`标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，`canvas`元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

`getContext()` 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

具体可看：[https://www.runoob.com/tags/ref-canvas.html][https_www.runoob.com_tags_ref-canvas.html]

## 代码 ##

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

[654142e2d9ed40aaa9acb7faf7811b0c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/f0d8318043024c6eb9012508dea74491.png
[https_www.runoob.com_tags_ref-canvas.html]: https://www.runoob.com/tags/ref-canvas.html