無法在Canvas上從WebApi調用繪制圖像

Question

我有一個可以工作的WebApi，可以為我提供PNG圖像（已在Fiddler中測試）。 但是，當我想在HTML Canvas上繪制圖像時，什么也沒發生。

Web API代碼 ：

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對象並調用initialize函數。 在那之前沒有問題。 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     
}

api-controller方法：

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;
}

為了完整起見，用於將Image / Bitmap數據轉換為byte []的圖像擴展名：

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();
        }
    }
}

javascript / 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

您的Web API正在發送原始圖像數據，但“ src”需要一個URL。