从安全的Web服务获取图像

我有一个REST Web服务，可以生成png或jpeg图像。它会生成实际图像，而不是指向图像的网址。从安全的Web服务获取图像

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

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

我曾尝试以下，但我得到一个消息，说是需要认证：

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

我使用其他服务调用返回JSON和文本$就功能，但我可以不知道如何用图像去做。

来源

2014-01-16 Felipe Reis

请添加一些代码来显示你有什么到目前为止已经试过。 – MattC

贵的服务回报图像的URL或直接的形象？ – Sachin

我已经编辑了问题补充更多细节。 –

未经测试的代码

$.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头值应包含的用户名：密码作为编码（BASE64）串，这将导致类似下面的标头：

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); 
     } 
    }); 
}

这可能是工作，因为你是在服务仍然authed ..

futhermore你有此选项：

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（）联合..但我从来没有真正使用之前..所以.. :)

kindly

来源

2014-01-16 13:34:08

谢谢Alex。现在，我真正的问题是要在“成功”函数中加载元素中的图像字节。 –

好的..我试图改进我的答案..让我知道如果我的方法可以帮助你！ –

@FelipeReis解决了吗？ –

$。阿贾克斯（{

 headers: { 
      'Authorization': "Basic " + btoa("username" + ":" + "[email protected]"), 
      "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"); 
     } 
    });

来源

2015-12-07 03:03:28

如果你能解释你的代码正在做什么，这对OP会有帮助。 –

从安全的Web服务获取图像

回答

相关问题