【WebAPI】传输图片数据,使用byte[]

Web API返回图片

C# 中 Web API返回图片数据是不能直接是Image格式,而是要转为byte[]格式

将Image转为byte[]

/// <summary>
/// Image转成byte[]
/// </summary>
private byte[] ImageToByte(Image image)
{
    MemoryStream ms = new MemoryStream();
    image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
    return ms.ToArray();
}

然后就是前端接收数据,于是我就这么写,结果当然是显示不出图片

function GetImg() {
    $.ajax({
        url: "/api/GetImg",
        type: "GET",
        data: {},
        success: function (data) {
            var img = data.Image;
            $("#img").attr("src", img );
        },
        error: function (data) {
            alert(JSON.stringify(data));
        }
    });
}

查了好多资料,说要转为Base64格式,于是找了好多,都是下面这个方法

function arrayBufferToBase64( buffer ) {
        var binary = '';
        var bytes = new Uint8Array( buffer );
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode( bytes[ i ] );
        }
        return window.btoa( binary );
    }

于是,我就这么写,

success: function (data) {
    var img = arrayBufferToBase64(data.Image);
    var imgData = "data:image/png;base64," + img;
    $("#img").attr("src", imgData);
},

经过多次尝试,arrayBufferToBase64这个方法一点用都没有,发现字节长度都是为0

 

后面,我还试着在后台中,使用System.Convert.ToBase64String方法将byte[]转成Base64字符串格式,就是图片直接使用string传输

前台中就这样写,

success: function (data) {
    var img = data.Image;
    var imgData = "data:image/png;base64," + img;
    $("#img").attr("src", imgData);
},

于是就成功了

但是,还没完,后面又试着使用byte[]传输图片,发现byte[]也可以

我发现,图片以byte[]格式传到前台 和 将byte[]转为Base64String字符串传到前台的数据是一样的

 

原来Web API传输byte[]格式数据时就是通过Base64格式传输的

 

于是,做Web API传输图片时,直接转为byte[]格式就可以了

前台直接这么写就可以了

success: function (data) {
    var img = data.Image;
    var imgData = "data:image/png;base64," + img;
    $("#img").attr("src", imgData);
},

 

相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页