验证码图片是一种常见的防止机器人恶意攻击的手段，下面介绍如何使用JavaScript生成验证码图片。
下面是示例代码：
// 创建canvas元素
var canvas = document.createElement('canvas');
// 设置canvas的宽高和背景颜色
canvas.width = 100;
canvas.height = 50;
canvas.style.backgroundColor = '#f5f5f5';
// 获取canvas上下文
var ctx = canvas.getContext('2d');
// 生成随机验证码字符串
var code = '';
var codeLength = 4; // 验证码长度为4
var codeChars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
for (var i = 0; i < codeLength; i++) {
code += codeChars.charAt(Math.floor(Math.random() * codeChars.length));
}
// 将验证码字符串绘制在canvas上
ctx.font = '30px Arial'; // 设置字体和字号
ctx.fillStyle = '#333'; // 设置字体颜色
ctx.fillText(code, 25, 35); // 绘制文字
// 将canvas转换为图片
var img = document.createElement('img');
img.src = canvas.toDataURL();
document.body.appendChild(img);
上面的代码生成了一个宽为100px，高为50px，背景颜色为#f5f5f5的canvas元素，并在其中绘制了一个长度为4，由数字和字母组成的随机验证码字符串。最后将canvas转换为图片，并将图片添加到页面中。