jquery - 从安全的web服务获取映像

  显示原文与译文双语对照的内容

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

这个服务使用基本的认证来保护,所以客户端需要在报头中提供用户名/密码。

我需要在网页的元素中显示这个图像,所以将服务的URL放在'src'属性中就不能工作了。

我已经尝试了以下操作,但收到一条消息,说明需要进行身份验证:

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

我在它的他服务调用中使用 $.ajax 函数来返回JSON和 text,但是我不知道如何使用图像。

时间: 作者:

未测试的代码


$.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回调中生成认证头请求。

按照 RFC,认证头值应该包含 username:password 作为编码的( base64 ) 字符串,这将导致类似下面的标题:


Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

为base64编码提供加密 js

请注意使用 ssl 。 可以很容易地解码 username: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);
 }
 });
}

因为你仍然是服务的authed,所以这可能工作。

另外,你可以选择:


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编码的。 但是你可能必须扩展你的后端/rest服务功能来完成它。


$.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 ( ) 结合使用。 但我以前从未用过这个。 所以。"。"。

...