Question

我有一个REST Web服务，可以生成png或jpeg图像。它生成实际图像，而不是指向图像的URL。

此服务使用基本身份验证进行保护，因此客户端需要在标头中提供用户名/密码。

我需要在网页内的元素中显示此图片，因此将服务的网址放在'src'属性中将不起作用。

我尝试过以下操作，但收到一条消息，说明需要进行身份验证：

<img src="http://localhost:8080/app/rest/foto/100" class="photo">

我在返回JSON和文本的其他服务调用中使用$ .ajax函数，但我无法弄清楚如何使用图像。

Answer 1

未经测试的代码

$.ajax( {

    // target url/service
    url : '/service/images?id=1',
    dataType : 'json',
    beforeSend : function(xhr) {

        // there are still other ways to do it.. i prefer crypto.js
        var bytes = Crypto.charenc.Binary.stringToBytes(username + ":" + password);
        var base64 = Crypto.util.bytesToBase64(bytes);
        xhr.setRequestHeader("Authorization", "Basic " + base64);
    },
    error : function(xhr, ajaxOptions, thrownError) {

        // reset or whatever
        onError('Invalid Credentials');
},
    success : function(model) {

        // fetch the image..
        ...
    }
});

在客户端，我们的想法是在beforeSend回调中制作auth头请求。

根据RFC 1945，auth标头值应包含用户名：password as encoded（base64）string，这将产生类似以下标题的内容：

Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

对于base64编码，

尝试crypto-js。

注意使用ssl ..用户名：passwort可以轻松解码...

-----编辑-----

在成功事件被解雇后，我会尝试这样做：

success : function(model) {

    // fetch the image..
    var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg').load(function() {

        if (!this.complete 
            || typeof this.naturalWidth == "undefined" 
            || this.naturalWidth == 0) {

            alert('broken image!');
        } else {

            $("#something").append(img);
        }
    });
}

这可能会有效，因为您仍然可以使用该服务..

你还有这个选择：

var url = 'IMAGE_URL';
$.ajax({ 
    url : url, 
    cache: true,
    processData : false,
    beforeSend : function(xhr) {

        // there are still other ways to do it.. i prefer crypto.js
        var bytes = Crypto.charenc.Binary.stringToBytes(username + ":" + password);
        var base64 = Crypto.util.bytesToBase64(bytes);
        xhr.setRequestHeader("Authorization", "Basic " + base64);
    },
}).always(function(){
    $("#IMAGE_ID").attr("src", url).fadeIn();
});

这会给出一个漂亮的图像淡入，但可能会有性能故障，并依赖于使用缓存的假设..

另一种选择是使用base64编码的字符串..但您可能需要扩展后端/休息服务功能才能执行此操作。

$.ajax({ 
    url : 'BASE64_IMAGE_REST_URL', 
    processData : false,
}).always(function(b64data){
    $("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data);
});

ajax返回值是你的base64编码图像！所以它必须看起来像这样：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>

您可以在成功方法中尝试此尝试或与beforeSend（）结合使用..但我之前从未真正使用过..所以......：）

麻烦

Answer 2

$。AJAX（{

        headers: {
            'Authorization': "Basic " + btoa("username" + ":" + "P@ssw0rd"),
            "Accept": "application/json; odata=verbose"
        },
        contentType: "image/jpeg; odata=verbose",

        data1: "{ }",
        type: "GET",
        url: pictureUrl,
        success: function (model) {



            if (pictureUrl != null) {
                $("#userImage").attr('src', pictureUrl);
            } else {
                $("#userImage").attr('src', "../../assets/images/facebook- profile.jpg");
            }



        },
        error: function () {
            alert("failed");
        }
    });

从安全的Web服务获取图像

2 个答案: