télécharger l'image de toile au serveur S3

Question

Quelqu'un peut-il me montrer s'il vous plaît comment télécharger l'image de toile en utilisant AWS JavaScript au serveur S3? Je rencontre des problèmes dans l'image de téléchargement sur le serveur Amazon S3 en utilisant JavaScript SDK et j'ai besoin de réaliser les choses suivantes.

-> Créer une image sur le canevas HTML5 et redimensionner l'image dans le JavaScript.

-> Puis télécharger l'image sur le serveur Amazon S3.

Mais le problème:

*) Lors du chargement de l'image au serveur S3, il est de télécharger les informations de pixels d'image sur S3 à la place de l'image. Ainsi, dans l'aperçu du navigateur S3, il affiche le flux d'images au lieu de l'image tout en utilisant le code ci-dessous.

De plus, le support AWS Javascript Corps dans les formats suivants Buffer, Typed Array, Blob, String, ReadableStream.

Voici le code:

Code HTML

<canvas id="myCanvas" width="800" height="800" style="background-color: greenyellow;">Your browser doesn't support html5! Please download the latest version. 
</canvas> 
<input type="button" id="upload-button" value="Upload to S3" /> 

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.4.min.js"></script> 



<script type="text/javascript"> 
     AWS.config.update({ accessKeyId: 'ACCESSKEY', secretAccessKey: 'SECRETKEY' }); 
     AWS.config.region = 'ap-southeast-1'; 

     $(function() { 

     $("#upload-button").click(OnUpload);  

     }); 

     function OnUpload(){ 

      var canvas = document.getElementById("myCanvas"); 
      var ctx = canvas.getContext("2d"); 

      var img = new Image(); 
      img.src = 'Images/IMG_0001.JPG'; 

      img.onload = function() { 
      <!--image resize --> 
      var MAX_WIDTH = 200; 
       var MAX_HEIGHT = 200; 
       var width = img.width; 
       var height = img.height; 

       if (width > height) { 
        if (width > MAX_WIDTH) { 
         height *= MAX_WIDTH/width; 
         width = MAX_WIDTH; 
        } 
       } else { 
        if (height > MAX_HEIGHT) { 
         width *= MAX_HEIGHT/height; 
         height = MAX_HEIGHT; 
        } 
       } 
       canvas.width = width; 
       canvas.height = height; 
       ctx.drawImage(img, 0, 0, width, height); 

       <!--image resize end--> 

       var imageData = ctx.getImageData(0, 0, width, height); 
       var typedArray = imageData.data; 

       var bucket = new AWS.S3({ params: { Bucket: 'bucketName' } }); 
       var results = document.getElementById('results'); 
       results.innerHTML = ''; 
       var params = { Key: "sample.png", ContentType: "image/png", Body: typedArray }; 

       bucket.putObject(params, function (err, data) { 
        results.innerHTML = err ? 'ERROR!' : 'UPLOADED.'; 

       });     
      }   
     } 

</script> 

Quelqu'un peut-il s'il vous plaît me montrer comment faire cela? Merci à l'avance ...

Answer 1

Pour les personnes confrontées à des problèmes encore, cela permettra d'économiser un peu de temps:

var canvas = document.getElementById("imagePreviewChatFooter"); 
        var dataUrl = canvas.toDataURL("image/jpeg"); 
        var blobData = dataURItoBlob(dataUrl); 
        var fileName = file.name; 
        var params = {Key: fileName, ContentType: file.type, Body: blobData}; 
        bucket.upload(params, function (err, data) { 
         console.log(data); 
         console.log(err ? 'ERROR!' : 'UPLOADED.'); 
        }); 

ET

function dataURItoBlob(dataURI) { 
    var binary = atob(dataURI.split(',')[1]); 
    var array = []; 
    for(var i = 0; i < binary.length; i++) { 
     array.push(binary.charCodeAt(i)); 
    } 
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'}); 
}