使用 JavaScript 的随机图像生成器

简介

随机图像生成器是一个利用 JavaScript 生成随机图片的小项目。它可以用来生成背景图、头像、缺省图等等。这个项目包含了两个部分：

1. 用 JavaScript 生成随机图片
2. 在网页中展示随机图片

用 JavaScript 生成随机图片

这里提供一个简单的实现，可以生成一张尺寸为 500x500 的随机图片：

const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
const ctx = canvas.getContext('2d');
for (let x = 0; x < 500; x++) {
  for (let y = 0; y < 500; y++) {
    ctx.fillStyle = getRandomColor();
    ctx.fillRect(x, y, 1, 1);
  }
}
const image = canvas.toDataURL();

这段代码会生成一个尺寸为 500x500 的 canvas 元素，然后在每个像素的位置上填上一个随机颜色。最后，将生成的图片转化为 base64 格式。

这里用到了一个 getRandomColor 函数，用来生成随机颜色，实现如下：

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

这个函数会生成一个随机的六位十六进制颜色值。

在网页中展示随机图片

将生成的随机图片插入到网页中可以用以下代码：

const imageElement = document.createElement('img');
imageElement.setAttribute('src', image);
document.body.appendChild(imageElement);

这里创建了一个 img 元素，并将生成的 base64 图片作为 src 属性插入到图片中。

完整实现

在这里提供一个完整的随机图像生成器的实现，它可以设置图片尺寸和可选的背景颜色。

function createRandomImage(width, height, bgColor) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  if (bgColor) {
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, width, height);
  }
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      ctx.fillStyle = getRandomColor();
      ctx.fillRect(x, y, 1, 1);
    }
  }
  return canvas.toDataURL();
}

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

结尾

这个随机图像生成器非常简单，但是可以用来方便地生成一些小图片。你也可以通过更改相关的代码，来实现更多自定义的效果，比如添加渐变色、形状绘制等等。希望这篇文章对你有所帮助。