сделать снимок из поля ввода и преобразовать в base64

Question

Я хочу иметь возможность делать снимки с ПК и загружать их на сервер.До сих пор мне удалось сделать снимок из div, преобразовать его в base64 и отправить на серверную часть.Это работает без проблем.

Мой HTML:

  <img src="AvatarIMG/Goofy.jpg" id="img" width="100" height="100">

Мой JavaScript:

  $('#but_upload').click(function () {
            var c = document.createElement('canvas');
            var img = document.getElementById('img');
            c.height = img.naturalHeight;
            c.width = img.naturalWidth;
            var ctx = c.getContext('2d');
            console.log(ctx);
            ctx.drawImage(img, 0, 0, c.width, c.height, 0, 0, c.width, c.height);
            var base64String = c.toDataURL();

            $.ajax({
                url: 'Avatar',
                method: 'PUT', 
                contentType: 'application/json',
                headers: {
                    'Authorization': 'Bearer '
                        + sessionStorage.getItem("accessToken")
                },
                dataType: "text",
                data: JSON.stringify(base64String),
                success: function (data) {
                },
                error: function (jQXHR) {
                }
            });
        });

Однако я хочу иметь возможность выбрать изображение с моего локального компьютераа затем загрузить его, но пока не повезло ... Это то, что я пытался ...

Мой HTML:

 <input id="uploadImage" type="file" name="myPhoto" />

Мой JavaScript:

 $('#but_upload').click(function () {

            var img = document.createElement("img");
            img.height = 30;
            img.width = 20;

            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

            oFReader.onload = function (oFREvent) {
                img.src = oFREvent.target.result;
            };

            var c = document.createElement('canvas');
            c.height = img.naturalHeight;
            c.width = img.naturalWidth;
            var ctx = c.getContext('2d');

            ctx.drawImage(img, 0, 0, c.width, c.height, 0, 0, c.width, c.height);
            var base64String = c.toDataURL();



            $.ajax({
                url: 'Avatar',
                method: 'PUT', 
                contentType: 'application/json',
                headers: {
                    'Authorization': 'Bearer '
                        + sessionStorage.getItem("accessToken")
                },
                dataType: "text",
                data: JSON.stringify(base64String),
                success: function (data) {
                },
                error: function (jQXHR) {
                }
            });
        });

Некоторая помощь, пожалуйста.

Answer 1

Проблема в том, что вам нужно дождаться img.onload, потому что вы пытаетесь нарисовать его на холсте до того, как изображение даже загрузится.

$('#but_upload').click(function() {

  var img = document.createElement("img");

  var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

  oFReader.onload = function(oFREvent) {
    img.src = oFREvent.target.result;
  };

  img.onload = function() {
    var c = document.createElement('canvas');
    c.height = img.naturalHeight;
    c.width = img.naturalWidth;
    var ctx = c.getContext('2d');

    ctx.drawImage(img, 0, 0, c.width, c.height, 0, 0, c.width, c.height);
    var base64String = c.toDataURL();
    console.log(base64String);
    // upload your stuff
  }


  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="uploadImage" type="file" name="myPhoto" />
  <input id="but_upload" type="submit" />
</form>

С другой стороны, поскольку FileReader читается как DataURL, вы можете просто использовать то, что уже прочитано

$('#but_upload').click(function() {

  var img = document.createElement("img");

  var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

  oFReader.onload = function(oFREvent) {
    img.src = oFREvent.target.result;
    var base64String = oFREvent.target.result;
    console.log(base64String);
    // do your uploading stuff here
  };


  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="uploadImage" type="file" name="myPhoto" />
  <input id="but_upload" type="submit" />
</form>