图片加水印

weilun0510 · Oct 8, 2024 · cc836bf · cc836bf
1 parent 0487257
commit cc836bf
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 0 deletions.
diff --git a/assets/123.jpg b/assets/123.jpg
diff --git a/assets/images/face1_part1.png b/assets/images/face1_part1.png
diff --git a/assets/images/face1_part2.png b/assets/images/face1_part2.png
diff --git a/assets/images/face1_part3.png b/assets/images/face1_part3.png
diff --git a/assets/images/face1_part4.png b/assets/images/face1_part4.png
diff --git a/assets/images/face2_part1.png b/assets/images/face2_part1.png
diff --git a/assets/images/face2_part2.png b/assets/images/face2_part2.png
diff --git a/assets/images/face2_part3.png b/assets/images/face2_part3.png
diff --git a/assets/images/face2_part4.png b/assets/images/face2_part4.png
diff --git a/assets/v3.mp4 b/assets/v3.mp4
diff --git a/assets/下载.png b/assets/下载.png
diff --git a/canvas/图片加水印/index.html b/canvas/图片加水印/index.html
@@ -0,0 +1,36 @@
+<canvas id="watermarkCanvas" style="display: none"></canvas>
+<img id="imageWithWatermark" src="" alt="Image with Watermark" />
+
+<script>
+  function addWatermarkToImage(imageSrc, watermarkText) {
+    const canvas = document.getElementById('watermarkCanvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    img.src = imageSrc;
+    img.onload = () => {
+      // 设置canvas大小与图片一致
+      canvas.width = img.width;
+      canvas.height = img.height;
+
+      // 绘制图片
+      ctx.drawImage(img, 0, 0);
+
+      // 设置水印样式
+      ctx.font = '48px sans-serif';
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'bottom';
+
+      // 绘制水印
+      ctx.fillText(watermarkText, img.width - 20, img.height - 20);
+
+      // 将带水印的图片显示到页面上
+      const imageWithWatermark = document.getElementById('imageWithWatermark');
+      imageWithWatermark.src = canvas.toDataURL('image/png');
+    };
+  }
+
+  // Example usage
+  addWatermarkToImage('../../assets/123.jpg', 'Your Watermark Text');
+</script>