Question

我正在尝试以PNG格式显示图像（它从以下代码返回为MIME媒体类型图像/ png）。是否需要以某种方式保存？：

      $.ajax({
        type: "GET",
        url: url + "/api/image/",
        contentType: "image/png",
        async: false
      })
      .done(function(msg) {
        // msg IS THE MIME MEDIA TYPE PNG IMAGE
        // HOW DO I DISPLAY THIS IMAGE INSIDE AN HTML PAGE?
      })
      .fail(function(msg) {
        // failing is okay for image, just ignore it
      });

Answer 1

以下是使用纯Javascript（fiddle）的解决方案：

<强> HTML

<div style="background-color: #4679bd; padding: .5em;">
    <img id="image"/>
</div>

<强>的Javascript

var request = new XMLHttpRequest();
request.open('GET','http://fiddle.jshell.net/img/logo.png', true);
request.responseType = 'arraybuffer';
request.onload = function(e) {
    var data = new Uint8Array(this.response);
    var raw = String.fromCharCode.apply(null, data);
    var base64 = btoa(raw);
    var src = "data:image/jpeg;base64," + base64;

    document.getElementById("image").src = src;
};

request.send();

它使用Uint8Array和XMLHttpRequest Level 2的responseType属性，因此您的跨浏览器里程可能会有所不同。我只测试了最新版本的Firefox和Chrome。

就JQuery解决方案而言，我发现了很多discussion和一些extensions，但到目前为止还没有“官方”。

在html中显示图像，该图像作为MIME媒体类型从ajax调用返回

1 个答案: