【分享】一个图片添加水印的小demo的页面，可自定义样式

BestArsenaI

已于 2024-06-28 19:05:59 修改

阅读量1k

点赞数 16

文章标签： javascript css 前端

于 2024-03-26 22:27:47 首次发布

本文链接：https://blog.csdn.net/m0_53253682/article/details/137060006

版权

有时候想给某张图片添加一个自己的水印，但是又懒的下载相应软件，用js canvas制作一个静态页面，对于单张图片添加自定义文字水印，大小间距，角度可调。
页面如下：
在这里插入图片描述
选择图片，设置相应参数，点击添加水印：

效果：

完整程序如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加水印</title>
    <link rel="shortcut icon" href="https://img1.imgtp.com/2024/01/09/BKw2wjPL.png" type="image/x-icon">
    <style>
        body {
     
            background-color: #c8adc4;
        }

        .ml-5 {
     
            margin-left: 15px;
        }

        .container {
     
            display: flex;
            justify-content: space-between;
            /* 使两个 div 平均分布在容器中 */
        }

        .box {
     
            width: 49.5%;
            /* 或根据需要设置 */
            /* 其他样式 */
        }

        #canvas {
     
            border: 2px solid rgb(210, 208, 208);
            width: 95%;
            height: auto;
            overflow: hidden;
        }

        #p {
     
            margin-top: 20px;
            width: 95%;
            height: auto;
        }

        #canvas img {
     
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #imageUpload {
     
            height: auto;
            width: auto;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            <div style="border: 2px solid #c9c9c9cc; padding: 10px;">
                <div>
                    <input type="file" id="imageUpload" style="color: rgb(249, 137, 109); margin-left: 40%;">
                </div>
                <div style="margin-left: 10%;margin-top: 30px;">
                    <span>大小：</span><input type="text" placeholder="修改水印大小" style="height: 24px;width<