Javascript：从JPEG数据显示图像

Question

我正在尝试从服务器中下载jpeg图像，该服务器需要在标头中使用API​​ KEY进行身份验证。然后我想显示图像。

我相信下载工作正常，但我无法弄清楚如何显示图像数据。

最初我尝试将数据编码为base64，然后使用“img src =”data：image / jpeg; base64“来显示它（如下所示）。但这不起作用，我想知道画布是否是要走的路。我一直在搜索，我无法弄清楚如何将数据加载到画布中。

    $.ajax
    ({
            type: "GET",
            url: "http://my.website.net/index.php/rest/data/5592",
            dataType: 'image/jpeg',
            async: false,

            beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-App-Request-Method", "get");
                    xhr.setRequestHeader("X-App-Request-Key", "XYX");
            },

            success: function (data) {
                    function hexToBase64(str) {
                            return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
                            }
                    document.getElementById("image").src = "data:image/jpeg;base64,"+hexToBase64(data);
            }
    });