canvas给图片加水印

最新推荐文章于 2024-11-05 22:47:34 发布

给钱，谢谢！

最新推荐文章于 2024-11-05 22:47:34 发布

阅读量102

点赞数 1

文章标签：前端 canva可画

本文链接：https://blog.csdn.net/weixin_43073383/article/details/141503564

版权

ps不会用，自己写一下，凑合用


<!DOCTYPE html>
<html>
<head>
    <title>加水印</title>
</head>
<body>
    <h1>加水印</h1>
    <input type="file" id="imageInput" accept="image/*">
    <canvas id="canvas" width="800" height="800"></canvas>
    <button id="addWatermarkButton">Add Watermark</button>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const imageInput = document.getElementById('imageInput');
        const addWatermarkButton = document.getElementById('addWatermarkButton');
        let newWidth
        let newHeight
        imageInput.addEventListener('change', function() {
            const file = imageInput.files[0];
            const reader = new FileReader();

            reader.onload = function(e) {
                const img = new Image();
                img.onload = function() {
                    const aspectRatio = img.width / img.height;
                    if (aspectRatio > 1) {
                        newWidth = canvas.width;
                        newHeight = canvas.width / aspectRatio;
                    } else {
                        newWidth = canvas.height * aspectRatio;
                        newHeight = canvas.height;
                    }
                    canvas.width = newWidth;
                    canvas.height = newHeight;
                    ctx.drawImage(img, 0, 0, newWidth, newHeight);
                };
                img.src = e.target.result;
            };

            reader.readAsDataURL(file);
        });

        function addWatermarkText(text, x, y, rotateAngle) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(rotateAngle);
            ctx.font = '18px Arial';
            ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
            ctx.fillText(text, -70, -20);
            ctx.restore();
        }

        addWatermarkButton.addEventListener('click', function() {
            const watermarkText = '仅用作蜗牛免卡二次实名认证使用';
            const textWidth = ctx.measureText(watermarkText).width;
            const textHeight = 20; // 假设水印文本的高度为20

            const numLines = 6; // 水印文本的行数
            const lineHeight = newHeight / numLines; // 每行的高度

            for (let i = 0; i < numLines; i++) {
                const y = (lineHeight * i) + (lineHeight / 2) + (textHeight / 2); // 计算每行的y坐标
                // const x = (newWidth - textWidth) / 2; // 计算每行的x坐标，使水印文本居中
                const x = (newWidth - textWidth) / 2 + (Math.random() * 20 - 10); // 添加水平方向的随机偏移量
                const angle = -Math.PI / 12 + Math.random() * (Math.PI / 6); // 随机生成旋转角度
          
                const randomXOffset = Math.random() * 20 - 10; // 随机生成x坐标偏移量
                const randomYOffset = Math.random() * 20 - 10; // 随机生成y坐标偏移量

                addWatermarkText(watermarkText, x + randomXOffset, y + randomYOffset, angle);
            }
          });
    </script>
</body>
</html>