如何在Javascript中将字节[]/内存流绑定到图像src属性答案

【问题标题】：How to bind a byte[]/ Memory stream to image src attribute in Javascript如何在Javascript中将字节[]/内存流绑定到图像src属性
【发布时间】：2015-06-18 08:14:54
【问题描述】：

我有一个 ActionMethod，它可以返回图像的 Memorystream 或 byte[]。此操作方法在 ajax 上调用。现在我想将此图像绑定到图像标记 src 属性。

public ActionResult GetBpChart(string Timespan)
    {
        var ObjMemoryStream = new MemoryStream();
        try
        {
            ObjMemoryStream = MyModel.GetImage(Timespan);
        }
        catch (Exception Ex)
        {

        }
        //return Content(Convert.ToBase64String(ObjMemoryStream.GetBuffer()));
        //return Json(ObjMemoryStream.GetBuffer());
        return File(ObjMemoryStream.GetBuffer(), "image/jpeg");
    }

function GetChart() {
try {
    $.ajax({
        type: 'POST',
        url: "myActionMethodurl",
        data: {
            Timespan: $('#ddlBpTimespan').val()
        },
        success: function (ImgSrc) {
            // For Base64String
            //$('#divBpChart').innerHTML = '<img src= "data:image/jpeg;base64," ' + ImgSrc + '"/>';
            // For Json of byte[]
            //$('#divBpChart').innerHTML = '<img src= "data:image/gif;base64," ' + ImgSrc + '"/>';
            // For FileContentResult
            $('#imgBpChart').attr('src', ImgSrc);
            HideAjaxProgress();
        }
    });

} catch (E) {
} 
}

我尝试了以上 3 种组合。但没有运气。有人可以说我在这里缺少什么或实现此目标的正确方法是什么

【问题讨论】：

如果您直接请求 GetBpChart 操作，是否会返回有效图像？
是的，我愿意。我在直接调用 GetBpChart 操作时得到了预期的图像。

标签： javascript c# ajax asp.net-mvc asp.net-mvc-4

【解决方案1】：

通过阅读 .ajax() 文档，我想说简单的答案是“不，你不能那样做。”

幸运的是，您不需要这样做。只需创建相关 URL 并更新目标图像的 src 属性：

function GetChart() {
    try {
        var ImgSrc = '/mycontroller/myActionMethodurl?timespan=' + $('#ddlBpTimespan').val();
        $('#imgBpChart').attr('src', ImgSrc);
    } catch (error) {
    } 
}

如果您在视图中对此进行编码，则可以利用 UrlHelper 帮助构建正确的“基本”URL：

function GetChart() {
    try {
        var ImgSrc = '@Url.Action("myActionMethodurl", "mycontroller")?timespan=' + $('#ddlBpTimespan').val();
        $('#imgBpChart').attr('src', ImgSrc);
    } catch (error) {
    } 
}

也许是更好的选择？

有关似乎有效的纯 JavaScript 方法，请参阅Using jQuery's ajax method to retrieve images as a blob。

【讨论】：