随机生成自定义大小图片代码

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

小编为大家分享一个可以随机生成图片的代码，而且还可以自定义大小，以及添加自定义文字居中水印，快来看看吧!网站写文章可以用到的生成图片代码，希望对您有所帮助，直接上代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>随机生成图片</title>
    <script>
      function generateImage() {
        // 获取用户输入的图片大小、水印内容、颜色和字体大小
        var width = document.getElementById('width').value;
        var height = document.getElementById('height').value;
        var text = document.getElementById('text').value;
        var color = document.getElementById('color').value;
        var fontSize = document.getElementById('font-size').value;

        // 生成一个随机颜色的背景
        var red = Math.floor(Math.random() * 256);
        var green = Math.floor(Math.random() * 256);
        var blue = Math.floor(Math.random() * 256);
        var background = "rgb(" + red + "," + green + "," + blue + ")";

        // 生成canvas画布
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;

        // 在画布上绘制背景
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = background;
        ctx.fillRect(0, 0, width, height);

        // 绘制水印（居中显示）
        ctx.font = "bold " + fontSize + "px Arial";
        ctx.fillStyle = color;
        ctx.textAlign = "center";
        ctx.fillText(text, width/2, height/2);

        // 将画布转换为图片
        var img = document.createElement('img');
        img.src = canvas.toDataURL();

        // 将图片插入HTML页面中
        var container = document.getElementById('image-container');
        container.innerHTML = '';
        container.appendChild(img);
      }
    </script>
  </head>
  <body>
    <h1>随机生成图片</h1>
    <form>
      图片宽度：<input type="text" id="width"><br>
      图片高度：<input type="text" id="height"><br>
      水印内容：<input type="text" id="text"><br>
      水印颜色：
      <select id="color">
        <option value="black">黑色</option>
        <option value="white">白色</option>
        <option value="red">红色</option>
        <option value="green">绿色</option>
        <option value="blue">蓝色</option>
      </select><br>
      水印字体大小：<input type="text" id="font-size"><br>
      <button type="button" onclick="generateImage()">生成图片</button>
    </form>
    <div id="image-container"></div>
  </body>
</html>

自定义html文件，如：tp.html，直接打开即可!

根据需求填写，然后生成图片

右键图片即可下载到桌面

随机生成自定义大小图片代码

指定生成图片背景颜色如何实现？

你可以将以下代码：

// 生成一个随机颜色的背景
var red = Math.floor(Math.random() * 256);
var green = Math.floor(Math.random() * 256);
var blue = Math.floor(Math.random() * 256);
var background = "rgb(" + red + "," + green + "," + blue + ")";

修改为：

// 设置背景颜色
var background = "rgb(255,0,0)";

颜色代码参考：rgb255颜色代码大全

作者：文章来源：互联网

上一篇：一段随机生成图片大小500乘200的

下一篇：rgb255颜色代码大全