एस 3

से प्राप्त छवियों को प्रदर्शित करें मैं एस 3 से छवियां लाने और उन्हें अपने HTML पृष्ठ पर प्रदर्शित करना चाहता हूं।एस 3

कोणीय HTML फ़ाइल:

<section data-ng-controller="myCtrl"> 
    <img ng-src="{{src}}" width="200px" height="200px"> 
</section>

कोणीय नियंत्रक फ़ाइल:

angular.module('users').controller('myCtrl', ['$scope',function($scope) { 
    var s3 = new AWS.S3(); 
    s3.getObject({Bucket: 'mybucket', Key: 'myimage.jpg'},function(err,file){ 

    //code?? to display this image file in the img tag 
    //$scope.src=file????....obviously it wont work 

    }); 
}]);

मैं कुछ कॉल FileReader पाया जाता है और यह एक करने की कोशिश की:

var reader = new FileReader(); 
reader.onload = function(event) { 
    $scope.src = event.target.result; 
} 
reader.readAsDataURL(file);

लेकिन यह त्रुटि दिखाता है:
Uncaught TypeError: 'FileReader' पर 'readAsDataURL' निष्पादित करने में विफल: पैरामीटर 1 'ब्लॉब' प्रकार का नहीं है। मैं S3 में कोई दिलचस्पी नहीं
:

कृपया मुझे कोड के साथ मदद img टैग
मेरे S3 बाल्टी में फ़ाइल में प्रदर्शित करने के लिए

संपादित सार्वजनिक नहीं है। क्या मैं जानना चाहता हूँ कि
कैसे जो आपको एक फ़ाइल वस्तु (S3 obj) के रूप में अपने जावास्क्रिप्ट कोड में है एक छवि प्रदर्शित करने के लिए HTML छवि टैग

स्रोत

2015-09-21 Gaurav Gupta

क्या मैं पूछ सकता हूं कि आपकी बाल्टी में सार्वजनिक पढ़ने की पहुंच क्यों नहीं हो सकती है? यदि आप ऐसा नहीं करते हैं तो आपको एक कुंजी के माध्यम से बाल्टी तक पहुंचने की आवश्यकता है, और यदि आप अपने कोड में एक कुंजी डालते हैं तो आपकी बाल्टी मूल रूप से बहुत ही सार्वजनिक है। – enpenax

@enpenax वास्तव में मेरा प्रश्न यह है कि HTML छवि टैग –

का उपयोग कर फ़ाइल ऑब्जेक्ट के रूप में आपके जावास्क्रिप्ट कोड में आपके पास एक छवि को प्रदर्शित करने का तरीका है, क्या यह अभी काम कर रहा है? मेरे पास कुछ समस्या है –

आप छवियों को प्रदर्शित करने के लिए "fetch" नहीं करते हैं। आप छवि यूआरएल को उस स्थान पर इंगित करते हैं जहां वे संग्रहीत हैं (आपके मामले में एस 3)। तो व्यक्तिगत ऑब्जेक्ट खींचने के बजाय, उस बाल्टी में फ़ाइलों की सूची खींचें (bucket.listObjects) और फिर उन्हें थंबनेल/छवियों के स्रोत में जोड़ें।

<section data-ng-controller="myCtrl"> 
    <img ng-src="{{s3Url}}{{image.Key}}" width="200px" height="200px" ng-repeat="image in allImageData"> 
</section>

$scope.s3Url = 'https://s3-<region>.amazonaws.com/myBucket/'; 
var bucket = new AWS.S3({params: {Bucket: 'myBucket'}}); 
    bucket.listObjects(function (err, data) { 
    if (err) { 
     console.log(err); 
    } else { 
     console.log(data); 
     $scope.allImageData = data.Contents; 
    } 
    });

यहाँ यह मानते हुए कि फ़ाइलों अनुमति पढ़ा है। स्पष्ट कारणों से सार्वजनिक पढ़ने की अनुमति के बिना वे पहुंच योग्य नहीं होंगे।

संपादित करें: टिप्पणी के आधार पर, प्रश्न पृष्ठ पर वास्तविक छवि को लोड करने की मांग कर रहा है। यहां इसका तरीका बताया गया है:

function myCtrl($scope, $timeout) {  
    AWS.config.update({ 
    accessKeyId: 'YOUR_ACCESS_TOKEN', secretAccessKey: 'YOUR_SECRET'}); 
    AWS.config.region = "YOUR_REGION"; 

var bucket = new AWS.S3({params: {Bucket: 'YOUR_BUCKET'}}); 

    bucket.getObject({Key: 'happy-face.jpg'},function(err,file){ 

    $timeout(function(){ 
     $scope.s3url = "data:image/jpeg;base64," + encode(file.Body); 
    },1); 
}); 
} 

function encode(data) 
{ 
    var str = data.reduce(function(a,b){ return a+String.fromCharCode(b) },''); 
    return btoa(str).replace(/.{76}(?=.)/g,'$&\n'); 
}

डेटा आप S3 से प्राप्त बाइट सरणी है। आपको इसे बेस 64 एनकोडेड डेटा यूआरआई में परिवर्तित करने की आवश्यकता है। एनकोड फ़ंक्शन को here से उधार लिया जाता है। यहां क्रेडेंशियल्स हटाए गए jsFiddle पर काम कर रहा है।

स्रोत

2015-10-10 05:20:27

के लिए जावास्क्रिप्ट एसडीके का उपयोग कर रहा हूं वास्तव में मेरा प्रश्न यह है कि कैसे प्रदर्शित किया जाए छवि जो आपके जावास्क्रिप्ट कोड में आईएमजी टैग –

का उपयोग कर फ़ाइल ऑब्जेक्ट के रूप में है, मैंने आपकी आवश्यकताओं को पूरा करने के लिए उत्तर अपडेट किया है। –

क्या आपको क्रोम में अपर्याप्त संसाधन समस्या का सामना करना पड़ा? मैं छवियों का एक गुच्छा प्री-लोड कर रहा हूं और मुझे यह काम नहीं दिख रहा है। – Tisha

का उपयोग कर अपने S3 फ़ाइल सार्वजनिक है (है आप इसे बदलने के लिए है, डिफ़ॉल्ट रूप से यह सार्वजनिक नहीं है) तो आप इस स्कीमा से यूआरएल प्राप्त कर सकते हैं:

https://s3-<region>.amazonaws.com/<bucket-name>/<key>

तो अगर क्षेत्र eu पश्चिम -1 कुछ इस तरह के साथ है

$scope.src = 'https://s3-eu-west-1.amazonaws.com/mybucket/myimage.jpg';

स्रोत

2015-09-21 19:09:44

मेरी बाल्टी सार्वजनिक नहीं हो सकती है ... फिर कोई विचार? –

तो आपको ब्राउज़र के लिए जावास्क्रिप्ट एसडीके का उपयोग करना चाहिए http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-intro.html –

अच्छी तरह से मैं पहले से ही ब्राउज़र –

आपको केवल एस 3 में संग्रहीत छवि के यूआरएल का उल्लेख करना होगा।

https://mybucket.s3.amazonaws.com/myimage.jpg

यह काम करना चाहिए।

स्रोत

2015-10-15 19:21:12 Siddhu

कृपया प्रश्न को ध्यान से पढ़ें –

वचन के साथ एस 3 से छवि प्राप्त करने का पूर्ण कार्यान्वयन - आनंद लें!

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.179.0.min.js"></script> 
</head> 
<body> 
    <img height="200" width="200"> 
    <script> 

    var mimes = { 
     'jpeg': 'data:image/jpeg;base64,' 
    }; 

     AWS.config.update({ 
      signatureVersion: 'v4', 
      region: 'us-east-1', 
      accessKeyId: '', 
      secretAccessKey: '' 
     }); 

     var bucket = new AWS.S3({params: {Bucket: 'xxx'}}); 

     function encode(data) 
     { 
      var str = data.reduce(function(a,b){ return a+String.fromCharCode(b) },''); 
      return btoa(str).replace(/.{76}(?=.)/g,'$&\n'); 
     } 

     function getUrlByFileName(fileName,mimeType) { 
      return new Promise(
       function (resolve, reject) { 
        bucket.getObject({Key: fileName}, function (err, file) { 
         var result = mimeType + encode(file.Body); 
         resolve(result) 
        }); 
       } 
     ); 
     } 

     function openInNewTab(url) { 
      var redirectWindow = window.open(url, '_blank'); 
      redirectWindow.location; 
     } 

     getUrlByFileName('sprites.png', mimes.jpeg).then(function(data) { 
      //openInNewTab(data); 
      document.querySelector('img').src = data; 
     }); 

    </script> 
</body> 
</html>

स्रोत

2018-01-10 15:24:32

उत्तर

संबंधित मुद्दे