一段随机生成图片大小500乘200的代码，可添加文字居中

发布时间：2023-05-27 阅读数：

我们写文章时，文章添加图片是一个问题，那么今天小编为大家写了一段随机生成背景大小500乘200的图片代码，可添加文字居中，快来看看吧!

首先再网站跟目录新建“tp.html”文件，写入以下代码↓

<!DOCTYPE html>
<html>
<head>
    <title>随机生成图片</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        img {
            max-width: 100%;
            max-height: 100%;
            display: block;
            margin: auto;
            position: relative;
        }

        input {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="container">
        <img id="randomImage" src="" alt="随机生成的图片">
    </div>

    <script>
        // 随机生成图片的函数
        function generateImage() {
            var canvas = document.createElement('canvas');
            canvas.width = 500;
            canvas.height = 200;
            var ctx = canvas.getContext('2d');
            // 随机生成颜色
            ctx.fillStyle = 'rgb(' + Math.floor(Math.random() * 256) + ','
                                     + Math.floor(Math.random() * 256) + ','
                                     + Math.floor(Math.random() * 256) + ')';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            var dataURL = canvas.toDataURL();
            document.getElementById('randomImage').src = dataURL;
        }

        // 在图片上添加文字水印的函数
        function addText() {
            var waterMark = prompt("请输入文字水印：");
            var img = document.getElementById('randomImage');
            var canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            ctx.font = "20px Arial";
            ctx.fillStyle = "white";
            ctx.textAlign = "center";
            ctx.fillText(waterMark, img.width/2, img.height/2);
            var dataURL = canvas.toDataURL();
            img.src = dataURL;
        }

        // 初始化生成图片，并绑定添加水印的事件
        window.onload = function() {
            generateImage();
            document.getElementById('randomImage').addEventListener('click', addText);
        }
    </script>
<meta name="copyright" content="版权所有 ©分类目录网WWW.FLML.CC 2023">
</body>
</html>

根据域名打开http://www.域名.com/tp.html

然后点击图片输入文字标题，即可生成文字居中图片，将它拖拉至桌面即可，如下图↓

一段随机生成图片大小500乘200的代码，可添加文字居中