Javascript 拖放图像转换为Base64

我的网站需要以下功能。一切都必须在客户机上完成（javascript或任何javascript库）

我在本地计算机中有一个图像，请将其拖放到浏览器中。在不向服务器发出任何请求的情况下，javascript必须将此图像转换为base64

我有一个在客户端将映像转换为base64的代码，但是这个代码需要HTTP URL。我需要的是，图像需要从本地上传

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
  console.log('RESULT:', dataUrl)
})

---

我已经扩展了现有代码，其中允许复制/粘贴图像以包括拖放行为：

我在Chrome浏览器中成功地进行了测试，但没有在Firefox、IE或任何其他浏览器中进行测试

我使用HTML5Canvas元素和JavaScript实现拖放。在画布上，通过调用

e.preventDefault（），防止dragover和drop事件的默认操作非常重要。否则，拖放只会在新选项卡/窗口中打开图像

这里有一个完整的例子

HTML:

我在浏览器中使用了画布元素进行拖放。如果在画布上使用toDataUrl方法，则应传递“image/png”作为参数，而不是URL。如下所示：
var-imageData=image.toDataURL（“image/png”）；imageData=imageData.replace（'data:image/png；base64'，''）注意，我必须替换'data:image/png；base64'在向服务器提交base64字符串时使用空字符串。@iCode:您能给出一些示例吗？您已经在使用元素了吗？不，如果需要，我可以使用下面的答案更新的I。我已经链接到一个JS提琴，你可以用它来测试拖放到画布元素上，并根据你的需要进行修改。哇，这太棒了！非常感谢！我对代码进行了编辑，使其更易于重用：我再次更新了我的fiddle代码。不幸的是，它仍然不支持动画GIF。有助于获取动画GIF的数据URL。
<div id="instructions">
  Method 1:<br /> 1. Copy image data into clipboard, or press Print Screen <br /> 2. Press Ctrl+V (page/iframe must be focused): <br /><br /> Method 2:<br /> 1. Drag and drop an image onto the canvas
</div>
<br /><br />
<canvas style="border:1px solid grey;" id="my_canvas" width="300" height="300"></canvas>

var CLIPBOARD = new CLIPBOARD_CLASS("my_canvas", true);

/**
 * image pasting into canvas
 * 
 * @param {string} canvas_id - canvas id
 * @param {boolean} autoresize - if canvas will be resized
 */
function CLIPBOARD_CLASS(canvas_id, autoresize) {
  var _self = this;
  var canvas = document.getElementById(canvas_id);
  var ctx = document.getElementById(canvas_id).getContext("2d");

  //handlers
  document.addEventListener('paste', function(e) {
    _self.paste_auto(e);
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function(e) {
    // prevent default to allow drop
    e.preventDefault();
  }, false);
  document.addEventListener('drop', function(e) {
    // prevent default action (open as link for some elements)
    //debugger;
    e.preventDefault();
    var items = e.dataTransfer.items;
    for (var i = 0; i < items.length; i++) {
      if (items[i].type.indexOf("image") !== -1) {
        document.getElementById("instructions").style.visibility = "hidden";
        //image
        var blob = items[i].getAsFile();
        var URLObj = window.URL || window.webkitURL;
        var source = URLObj.createObjectURL(blob);
        _self.paste_createImage(source);
      }
    }
  });

  //on paste
  this.paste_auto = function(e) {
    if (e.clipboardData) {
      var items = e.clipboardData.items;
      if (!items) return;

      //access data directly
      for (var i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          //image
          var blob = items[i].getAsFile();
          var URLObj = window.URL || window.webkitURL;
          var source = URLObj.createObjectURL(blob);
          this.paste_createImage(source);
        }
      }
      e.preventDefault();
    }
  };
  //draw pasted image to canvas
  this.paste_createImage = function(source) {
    //debugger;
    var pastedImage = new Image();
    pastedImage.onload = function() {
      if (autoresize == true) {
        //resize
        canvas.width = pastedImage.width;
        canvas.height = pastedImage.height;
      } else {
        //clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
      ctx.drawImage(pastedImage, 0, 0);
    };
    pastedImage.src = source;
  };
}

// detect blank canvas: https://stackoverflow.com/a/17386803/177416
function isCanvasBlank(canvas) {
  var blank = document.createElement('canvas');
  blank.width = canvas.width;
  blank.height = canvas.height;

  return canvas.toDataURL() === blank.toDataURL();

}

document.getElementById("saveButton").addEventListener("click", function() {
  debugger;
  var form = document.getElementById("myForm");
  //if (form.valid()) {
    var image = document.getElementById("my_canvas");
    if (!isCanvasBlank(image)) {
      var imageData = image.toDataURL("image/png");
      imageData = imageData.replace('data:image/png;base64,', '');
      document.getElementById("imageData").value = imageData;
    } else {
      // Pass null, otherwise the POST will submit { id = "imageData" } for this field.
      document.getElementById("imageData").value = null;
    }
    //form.submit();
  //}
});

var imageData = image.toDataURL("image/png");