Невозможно нарисовать изображение из WebApi на Canvas

Question

У меня есть рабочий WebApi, который поставляет мне PNG-изображение (проверено в Fiddler). Однако, когда я хочу нарисовать изображение на холсте HTML, ничего не происходит.

Web код апи:

public HttpResponseMessage GetInitialMap(int height, int width) 
{ 
    var chart = RmdbHelper.GetInitialChart(height, width); 

    MemoryStream memoryStream = new MemoryStream(); 
    chart.Save(memoryStream, ImageFormat.Png); 

    HttpResponseMessage response = new HttpResponseMessage(); 
    response.Content = new StreamContent(memoryStream); 
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png"); 
    response.StatusCode = HttpStatusCode.OK; 

    return response; 

} 

Это Javascript и JQuery код вызвать изображение и попробуйте нарисовать

var NavChart = function() { 
    var ctx, 
    chartHeight, 
    chartWidth, 

    // other stuff 

    renderBackgroundMap = function() { 
     $.get("../api/NauticalMaps/GetInitialMap?height" + chartHeight + "&width=" + chartWidth) 
      .done(function (bgImage) { 
       var background = new Image(chartWidth, chartHeight); 
       background.src = bgImage; 
       ctx.drawImage(background, 0, 0); 
      }) 
      .fail(function (error) { 
       showError("..."); 
      }); 

    }; 

    initialize = function(canvasId) { 
     var canvas = document.getElementById(canvasId); 
     chartHeight = canvas.getAttribute("height"); 
     chartWidth = canvas.getAttribute("width"); 

     ctx = canvas.getContext("2d"); 

     render(); 
    }; 

    return { 
     initialize: initialize 
    }; 
}; 

На странице HTML я создаю объект NavChart и вызовите функцию инициализации. С тех пор проблем нет. Fiddler показывает мне, что вызов сделан, и он возвращает изображение.

HTML и вызовите:

<div class="row"> 
    <canvas id="zeekaart" height="550" width="1150" style="border: 1px solid lightgrey"></canvas> 
</div> 


<script> 
    var nav = new NavChart(); 
    nav.initialize("zeekaart"); 
</script> 

Кажется, что

var background = new Image(chartWidth, chartHeight); 
background.src = bgImage; 

.src ожидает URL или назначения. Но с использованием

.done(function (bgImage) { 
    ctx.drawImage(bgImage, 0, 0); 
}) 

также не работает.

Любые идеи? Я не хочу записывать все изображения в временную папку на сервере и очищать их по истечении заданного времени.

Answer 1

Обходной представлен @Kaiido делает работу достаточно хорошо, как это:

var back = new Image(); 
back.onload = function() { 
    ctx.drawImage(back, 0, 0); 
} 
back.src = "../api/NauticalMaps/GetInitialMap?height=" + chartHeight + "&width=" + chartWidth; 

Однако ... Я, наконец, нашел решение моей проблемы. Часть моей проблемы не возвращала объект JSON, возвращая его как простое изображение. При возвращении чисто изображения, код выше будет делать. Но, возвращая изображение как часть объекта JSON, вы можете напрямую использовать изображение в памяти браузера. Вот мое решение:

Простой класс для хранения данных (которые будут отправлены автоматически, как JSON) в браузер

public class NavigationMapData 
{ 
    public byte[] MapData { get; set; } 

    // ... other data goes in here as well  
} 

Метод апи-контроллер:

public NavigationMapData Get(string id, double northing, double easting, double northing2, double easting2, int height, int width) 
{ 
    NavigationMapData data = new NavigationMapData(); 
    // next method just returns a Bitmap object 
    var img = RmdbHelper.GetChart(northing, easting, northing2, easting2, height, width); 
    // convert the object 
    data.MapData = img.ToByteArray(ImageFormat.Jpeg); 
    return data; 
} 

Для полноты , расширение изображения для преобразования данных изображения/битмапа в байт []:

public static class ImageExtensions 
{ 
    public static byte[] ToByteArray(this Image image, ImageFormat format) 
    { 
     using (MemoryStream ms = new MemoryStream()) 
     { 
      image.Save(ms, format); 
      return ms.ToArray(); 
     } 
    } 
} 

Jav ascript код/​​JQuery:

$.get(URL_TO_API_PLUS_PARAMS) 
    .done(function (navMapData) { 

     var img = document.createElement("img"); 
     // as seen on stackoverflow somewhere 
     img.src = 'data:image/jpeg;base64,' + navMapData.MapData; 
     ctx.drawImage(img, 0, 0); 
    }) 
    .fail(function (error) { 
     // onError actions 
    }) 
    .always(function() { 
     // onFinished actions 
    }); 

Теперь у меня больше контроля над своими API вызовов в случае растровой или мои данные не загружаются.

Answer 2

Ваш веб-API отправляет необработанные данные изображения, но «src» ожидает URL.