снимок экрана элемента div и отправка в хранилище aws s3 - PullRequest
0 голосов
/ 15 февраля 2019

function genScreenshot() {
    $('#text1').html2canvas({
      onrendered: function (canvas) {
                //Set hidden field's value to image data (base-64 string)
        
        var uri = canvas.toDataURL("image/png");
       
        var image = new Image();
        image.src = uri;       
         
                
        $('#file-chooser').val(image);

        //Submit the form manually
       
      }
    });
  }

  
    AWS.config.region = 'us-east-1';

    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'us-east-1:44b81748-9aec-46d0-bb9d-f2d1820f1d3d'
        });

    AWS.config.credentials.get(function(err) {
        if (err) alert(err);
        console.log(AWS.config.credentials);
    });

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

        var fileChooser = document.getElementById('file-chooser');
        var button = document.getElementById('upload-button');
        var results = document.getElementById('results');
        button.addEventListener('click', function() {

            var file = fileChooser.files[0];

            if (file) {

                results.innerHTML = '';
                var objKey = file.name;
                var params = {
                    Key: objKey,
                    ContentType: file.type,
                    Body: file,
                    ACL: 'public-read'
                };

                bucket.putObject(params, function(err, data) {
                    if (err) {
                        results.innerHTML = 'ERROR: ' + err;
                    } else {
                        listObjs(); // this function will list all the files which has been uploaded
                        //here you can also add your code to update your database(MySQL, firebase whatever you are using)
                    }
                });
            } else {
                results.innerHTML = 'Nothing to upload.';
            }
        }, false);
        
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

function genScreenshot() {
    $('#text1').html2canvas({
      onrendered: function (canvas) {
                //Set hidden field's value to image data (base-64 string)
        
        var uri = canvas.toDataURL("image/png");
       
        var image = new Image();
        image.src = uri;       
         
                
        $('#file-chooser').val(image);

        //Submit the form manually
       
      }
    });
  }

  
    AWS.config.region = 'us-east-1';

    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'us-east-1:44b81748-9aec-46d0-bb9d-f2d1820f1d3d'
        });

    AWS.config.credentials.get(function(err) {
        if (err) alert(err);
        console.log(AWS.config.credentials);
    });

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

        var fileChooser = document.getElementById('file-chooser');
        var button = document.getElementById('upload-button');
        var results = document.getElementById('results');
        button.addEventListener('click', function() {

            var file = fileChooser.files[0];

            if (file) {

                results.innerHTML = '';
                var objKey = file.name;
                var params = {
                    Key: objKey,
                    ContentType: file.type,
                    Body: file,
                    ACL: 'public-read'
                };

                bucket.putObject(params, function(err, data) {
                    if (err) {
                        results.innerHTML = 'ERROR: ' + err;
                    } else {
                        listObjs(); // this function will list all the files which has been uploaded
                        //here you can also add your code to update your database(MySQL, firebase whatever you are using)
                    }
                });
            } else {
                results.innerHTML = 'Nothing to upload.';
            }
        }, false);
        
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.401.0.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="text1" style="border:3px solid black; margin:30px; padding:30px;width:40%;">

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

</div>


<input type="file" id="file-chooser">

    <button id="upload-button" onclick="genScreenshot()">Upload to S3</button>

    <div id="results"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...