jquery - 从安全网络服务获取图像

Question

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

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

我需要在网页内的元素中显示此图像，因此将服务的 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 header 请求。

根据 RFC 1945 ，auth header 值应包含 username:password 作为编码 (base64) 字符串，这将导致类似于以下 header 的内容:

Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

对于 Base64 编码，给出 crypto-js尝试一下。

小心使用 ssl.. 用户名:密码可以轻松解码...

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

成功事件触发后我会尝试这个:

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..."/>

您可以在 success 方法中尝试此尝试，或者与 beforeSend() 结合使用..但我以前从未真正使用过它..所以..:)

请