后台WebAPI返回图片内容的二进制流
//……其它代码略
byte[] imageBuffer;
//保存图片数据
using (MemoryStream stream = new MemoryStream())
{
image.Save(stream, ImageFormat.Jpeg);//生成的验证码图片写入stream流
imageBuffer = stream.ToArray();//转换成byte[]数组
}
var respimg = new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new System.Net.Http.ByteArrayContent(imageBuffer)
};
respimg.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpg");
return respimg;
前台通过JS获取返回的照片信息并显示
//获取验证码
function GetYZM() {
console.log("验证码请求中……");
var ClientID = $("#txt_ClientID").val();
var ClientType = $("#sl_type").val();
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("Post", "api/v1/Start/GetImgCode", true);
xmlhttp.responseType = "blob";
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.onload = function () {
// console.log(this);
if (this.status == 200) {
var blob = this.response;
var img = document.getElementById("img_yzm");
img.onload = function (e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
}
}
xmlhttp.send(JSON.stringify({ clientid: ClientID, clienttype: ClientType }));
}
实现效果: