HTML5实现图片、文字水印功能

原创

于 2024-12-22 20:20:49 发布 · 1.4k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

以下是一个基于 HTML5 Canvas 和 CSS3 的图片和文字盲水印实现的完整前端代码。代码支持通过输入文字或上传图片生成水印，并将水印叠加到图片上：

功能实现

用户上传背景图片。
输入文字水印或选择图片水印。
可调整水印透明度、位置、大小。
生成的图片可下载。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片与文字盲水印</title>
  <style>
    body {
     
     
      font-family: Arial, sans-serif;
      margin: 20px;
      padding: 0;
    }
    .container {
     
     
      max-width: 800px;
      margin: auto;
    }
    canvas {
     
     
      border: 1px solid #ccc;
      margin-top: 20px;
      max-width: 100%;
    }
    input, button, select {
     
     
      margin: 10px 0;
      padding: 8px;
      font-size: 16px;
    }
    .controls {
     
     
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .controls > div {
     
     
      flex: 1 1 calc(50% - 20px);
    }
    button {
     
     
      background-color: #007BFF;
      color: white;
      border: none;
      cursor: pointer;
    }
    button:hover {
     
     
      background-color: #0056b3;
    }
    .position-controls button {
     
     
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>图片与文字盲水印生成工具</h1>
    <div class="controls">
      <div>
        <label for="backgroundImage">选择背景图片:</label>
        <input type="file" id="backgroundImage" accept="image/*">
      </div>
      <div>
        <label for="watermarkText">文字水印:</label>
        <input type="text

最低0.47元/天解锁文章