upload canvas image to S3 server

Question

Can someone please show me how to upload the canvas image using AWS JavaScript to S3 server?

I am having bit trouble in the uploading image on Amazon S3 server using JavaScript SDK and need to achieve the following things.

-> Create an image on HTML5 canvas and resize the image in the JavaScript.

-> Then upload the image to Amazon S3 server.

But the problem :

*) While uploading the image to S3 server it is uploading the image pixel information on S3 instead of image.

So, in the S3 browser preview, it is showing the image stream instead of image while using the below code.

Moreover, AWS Javascript support Body in the following formats Buffer, Typed Array, Blob, String, ReadableStream.

Below is the code:

HTML Code

<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>

Can someone please show me how to do this? Thanks in advance...

Answer 1

For people still facing issues , this will save some time :

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

AND

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