[英]Cannot draw image from WebApi call on Canvas
I have a working WebApi that delivers a PNG image to me (tested in Fiddler). 我有一个可以工作的WebApi,可以为我提供PNG图像(已在Fiddler中测试)。 However, when I want to draw the image an on HTML Canvas, nothing happens. 但是,当我想在HTML Canvas上绘制图像时,什么也没发生。
Web api code : 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;
}
This is the javascript and jquery code to call the image and try drawing 这是调用图像并尝试绘制的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
};
};
On the HTML page I create a NavChart object and call the initialize function. 在HTML页面上,我创建一个NavChart对象并调用initialize函数。 No problems until then. 在那之前没有问题。 Fiddler shows me that the call is made and it returns a image. Fiddler向我展示了该电话已发出,并返回了图像。
HTML and call : 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>
It seems that 看起来
var background = new Image(chartWidth, chartHeight);
background.src = bgImage;
the .src expects an URL or destination. .src需要一个URL或目标。 But plainly using 但简单地使用
.done(function (bgImage) {
ctx.drawImage(bgImage, 0, 0);
})
doesn't work either. 也不起作用。
Any ideas? 有任何想法吗? I don't want to write all images away in a temp folder on the server and clear them after a specified time. 我不想将所有图像写到服务器上的临时文件夹中,并在指定时间后清除它们。
A workaround presented by @Kaiido does the job well enough, like this: @Kaiido提出的解决方法可以很好地完成此工作,如下所示:
var back = new Image();
back.onload = function() {
ctx.drawImage(back, 0, 0);
}
back.src = "../api/NauticalMaps/GetInitialMap?height=" + chartHeight + "&width=" + chartWidth;
However ... I finally found the solution for my problem. 但是 ...我终于找到了解决我问题的方法。 Part of my problem was not returning a JSON object, by returning it as a plain image. 我的问题的一部分不是通过以纯图像形式返回JSON对象而没有返回。 When returning purely an image, the code above will do. 当纯粹返回图像时,上面的代码即可。 But, by returning the image as part of a JSON object, you can directly use the image in the browser memory. 但是,通过将图像作为JSON对象的一部分返回,您可以直接在浏览器内存中使用该图像。 Here's my solution: 这是我的解决方案:
A simple class for storing the data (which will be sent automatically as json) to the browser 用于将数据(将作为json自动发送)存储到浏览器的简单类
public class NavigationMapData
{
public byte[] MapData { get; set; }
// ... other data goes in here as well
}
The api-controller method: 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;
}
For the completeness, the image extension for converting Image/Bitmap data into a byte[]: 为了完整起见,用于将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();
}
}
}
The javascript/jquery code: 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
});
Now I have more control over my api calls in case a bitmap or my data would not load. 现在,我可以更好地控制自己的api调用,以防位图或数据无法加载。
您的Web API正在发送原始图像数据,但“ src”需要一个URL。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.