使用Ajax将C# Bitmap转换为Html img失效问题求助

你的问题核心在于Ajax请求获取图片二进制数据时，jQuery默认会将其解析为文本，导致二进制内容被破坏，再转base64自然无法正确显示图片。另外你的C#代码也存在几个小问题需要优化，下面一步步来修复：

一、修复C#验证码生成代码 #

先修正几个潜在问题，同时优化资源管理与验证码显示效果：

public ActionResult VerificationCode(int captchaWidth = 75, int captchaHeight = 25)
{
    // 优化Random种子：用Guid避免高并发下种子重复
    var random = new Random(Guid.NewGuid().GetHashCode());
    var colorList = new List<Color> { Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Blue, Color.Brown };

    // 直接生成5位随机数，简化逻辑
    var randString = random.Next(10000, 99999).ToString();
    Session["VerificationCode"] = randString;

    // 用using自动释放资源，避免内存泄漏
    using (var bitmap = new Bitmap(captchaWidth, captchaHeight))
    using (var graph = Graphics.FromImage(bitmap))
    using (var font = new Font("Arial", 16, FontStyle.Italic))
    using (var textBrush = new SolidBrush(Color.FromArgb(153, 153, 153)))
    {
        graph.Clear(Color.White);
        
        // 让验证码文字居中，避免超出图片边界
        var textSize = graph.MeasureString(randString, font);
        float x = (captchaWidth - textSize.Width) / 2;
        float y = (captchaHeight - textSize.Height) / 2;
        graph.DrawString(randString, font, textBrush, x, y);

        // 添加随机噪点
        for (var i = 0; i < 100; i++)
        {
            var colorIndex = random.Next(0, colorList.Count);
            var pixelX = random.Next(0, captchaWidth);
            var pixelY = random.Next(0, captchaHeight);
            bitmap.SetPixel(pixelX, pixelY, colorList[colorIndex]);
        }

        // 输出图片到响应流
        Response.ContentType = "image/gif";
        bitmap.Save(Response.OutputStream, ImageFormat.Gif);
        return new EmptyResult();
    }
}

代码优化点： #

• 用Guid.NewGuid().GetHashCode()作为Random种子，避免短时间多次请求时因DateTime.Now.Ticks重复导致验证码/噪点重复
• 所有实现IDisposable的对象用using包裹，自动释放资源，防止内存泄漏
• 调整文字绘制位置，让验证码居中显示，避免超出图片范围
• 简化5位数字生成逻辑，无需手动补0

二、修复前端JS代码（两种方案可选） #

方案1：跳过Ajax，直接修改img的src（最简单高效） #

图片本身可以直接通过URL加载，不需要用Ajax请求二进制数据，这是验证码刷新的常规做法：

$('#ChangeCaptcha').on('click', function () {
    // 添加时间戳参数，避免浏览器缓存旧验证码
    var timestamp = new Date().getTime();
    $('#CaptchaImage').attr('src', '@Url.Action("VerificationCode", "Base")?t=' + timestamp);
});

方案2：如果必须用Ajax（不推荐），需处理二进制Blob #

如果你一定要用Ajax获取，需要设置jQuery的xhrFields让请求返回Blob类型，再转成可识别的Data URL：

$('#ChangeCaptcha').on('click', function () {
    $.ajax({
        url: '@Url.Action("VerificationCode", "Base")',
        type: 'GET',
        xhrFields: {
            responseType: 'blob' // 指定返回二进制Blob类型
        },
        success: function (blob) {
            // 将Blob转换为浏览器可识别的临时URL
            var imageUrl = URL.createObjectURL(blob);
            $('#CaptchaImage').attr('src', imageUrl);
            // 页面销毁时可调用URL.revokeObjectURL(imageUrl)释放资源
        }
    });
});

原代码报错的核心原因 #

• 原Ajax请求未指定responseType，jQuery默认把二进制图片数据当成UTF-8文本解析，导致内容被破坏，转base64后无法识别为有效图片
• 即便手动修改mime类型，损坏的二进制数据也无法恢复成正常图片

额外注意事项 #

• 确保Session状态正常工作，否则验证码无法存入Session进行后续校验
• 若需兼容IE浏览器，优先选择方案1，因为IE对URL.createObjectURL的支持有限
• 可额外添加随机干扰线，进一步提高验证码的安全性

内容的提问来源于stack exchange，提问作者Leon Huang