javascript - 从输入字段中获取图片并转换为 base64

Question

我希望能够从 PC 拍照并上传到服务器。到目前为止，我已经成功地从 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，因为您试图在图像加载之前将其绘制到 Canvas 上。

$('#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>