【问题标题】:C# Bitmap to Html img using ajax doesn't work使用 ajax 到 Html img 的 C# Bitmap 不起作用
【发布时间】:2018-05-22 03:08:37
【问题描述】:

这是我制作位图的 C# 代码

   public void VerificationCode(int captchaWidth = 75, int captchaHeight = 25)
    {

        var colorList = new List<Color> { Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Blue, Color.Brown };


        Response.ContentType = "image/gif";

        Response.Clear();

        Response.BufferOutput = true;


        var randString = new Random((int)DateTime.Now.Ticks).Next(99999).ToString("00000");     

        Session["VerificationCode"] = randString;

        var bitmap = new Bitmap(captchaWidth, captchaHeight);            
        var graph = Graphics.FromImage(bitmap);            
        var font = new Font("Arial", 16, FontStyle.Italic);

        var fontColor = Color.FromArgb(153, 153, 153);            
        graph.Clear(Color.White);            
        graph.DrawString(randString, font, new SolidBrush(fontColor), 0, 0);

        var random = new Random((int)DateTime.Now.Ticks);
        var randomColor = new Random((int)DateTime.Now.Ticks);

        for (var i = 0; i < 100; i++)
        {
            var c = randomColor.Next(0, colorList.Count);
            var randPixelX = random.Next(0, captchaWidth);
            var randPixelY = random.Next(0, captchaHeight);
            bitmap.SetPixel(randPixelX, randPixelY, colorList[c]);
        }            
        bitmap.Save(Response.OutputStream, ImageFormat.Gif);
    }



 $('#ChangeCaptcha').on('click', function () {
        $.ajax({
            url: '@Url.Action("VerificationCode", "Base")',
            type: 'Get',
            async: false,
            success: function (data) {
                console.log(data);
                $('#CaptchaImage').attr('src', "data:image/gif;base64," + data);
            }
        });
    });

这是我使用 ajax 获取 Bitmap 以更改 img src 的 Javascript 代码。 但它不起作用。我总是收到错误消息。任何人都可以帮助我解决这个问题。我使用将 minitype 更改为“data:image/bmp;base64”或“data:image/gif”,然后总是出错。

【问题讨论】:

    标签: javascript c# jquery


    【解决方案1】:

    您正在序列化位图以响应流。您的 JS 将收到一个 System.Byte[] 类型的 .net 序列化对象,而不是 Base64 编码的字符串。

    1. 通过MemoryStream.ToArray()将位图保存到字节数组
    2. 使用Convert.ToBase64String(bitmapBytes)将此数组转换为Base64字符串
    3. 将结果字符串发送到 JS

    【讨论】:

      猜你喜欢
      • 2020-12-12
      • 1970-01-01
      • 2016-11-06
      • 2014-02-09
      • 2014-12-01
      • 2016-01-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多