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，因为您试图在图像加载之前将其绘制到画布上。

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

在输入字段中拍照并转换为base64

1 个答案: