javascript - attribute - mostrar imágenes tomadas desde s3
title css (4)
Implementación completa de obtener una imagen de s3 con promesa: ¡disfrútalo!
<!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>
Quiero buscar imágenes de s3 y mostrarlas en mi página HTML.
Archivo HTML angular:
<section data-ng-controller="myCtrl">
<img ng-src="{{src}}" width="200px" height="200px">
</section>
Archivo de controlador angular:
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
});
}]);
Encontré algo llamado FileReader y probé este:
var reader = new FileReader();
reader.onload = function(event) {
$scope.src = event.target.result;
}
reader.readAsDataURL(file);
Pero muestra error:
Unkeught TypeError: Error al ejecutar ''readAsDataURL'' en ''FileReader'': el parámetro 1 no es de tipo ''Blob''.
Ayúdeme con el código para mostrar el archivo de imagen en la etiqueta img
Mi cubo S3 no es público
EDITAR:
No estoy interesado en s3. lo que quiero saber es que
cómo mostrar una imagen que tienes en tu código de JavaScript en forma de un objeto de archivo (s3 obj) usando la etiqueta de imagen HTML
No "busca" las imágenes para mostrar. Simplemente apunte la URL de la imagen a la ubicación donde están almacenados (S3 en su caso). Por lo tanto, en lugar de extraer un objeto individual, extraiga la lista de archivos en ese depósito ( bucket.listObjects ) y luego agréguelos al origen de las imágenes / imágenes en miniatura.
<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;
}
});
Suponiendo que los archivos tienen permiso de lectura. No serán accesibles sin permiso público de lectura por razones obvias.
EDITAR: Basado en el comentario, la pregunta está buscando cargar la imagen real en la página. He aquí cómo hacerlo:
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'');
}
La información que obtienes del S3 es una matriz de bytes. Debe convertirlo en el URI de datos codificados en base64. La función de codificación es prestada desde here . Aquí hay un jsFiddle trabajo con credenciales eliminadas.
Si su archivo S3 es público (tiene que cambiarlo, de manera predeterminada no es público) puede obtener la URL de este esquema:
https://s3-<region>.amazonaws.com/<bucket-name>/<key>
Entonces, si la región es eu-west-1 con algo como esto:
$scope.src = ''https://s3-eu-west-1.amazonaws.com/mybucket/myimage.jpg'';
Solo tiene que mencionar la url de la imagen que está almacenada en el s3.
https://mybucket.s3.amazonaws.com/myimage.jpg
Esto debería funcionar.