拖放图像转换为Base64 [英] Drag and drop image convert to Base64

问题描述

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

I require the following functionality in my website. Everything has to be done on the client (javascript or any javascript library).

我在本地计算机上有一个图像，将其拖放到浏览器中。没有对服务器的任何请求，javascript必须将该图像转换为base64。

I have an image in my local machine, drag and drop it in the browser. Without any request to the server, the javascript has to convert this image as base64.

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

I have a code for converting the image to base64 on the client side, but this one requires HTTP URL. What I need is, the image needs to be uploaded from local.

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)
})

推荐答案

此JS小提琴中的现有代码，该代码允许复制/粘贴图像以包含拖放行为：
http://jsfiddle.net/wrv369/cbqe39L5/

I have expanded on existing code in this JS Fiddle which allows Copy/Paste of images to include Drag/Drop behavior: http://jsfiddle.net/wrv369/cbqe39L5/

我在Chrome浏览器中成功进行了测试，但未在Firefox，IE或任何其他浏览器中进行过测试。

I tested this in the Chrome browser with success, but did not test in Firefox, IE, or any other browser.

我m使用HTML 5 canvas元素和JavaScript来实现拖放。在画布上，通过调用 e.preventDefault（）; dragover 和 drop 事件的默认操作很重要。 c>。否则，拖放操作只会在新标签页/窗口中打开图像。

I'm using the HTML 5 canvas element and JavaScript to implement drag/drop. On the canvas, it's important to prevent the default action for the dragover and drop events by calling e.preventDefault();. Otherwise drag/drop will simply open the image in a new tab/window.

以下是完整示例。

HTML：

<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>

JavaScript：

JavaScript:

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();
  //}
});

如果您查看saveButton单击处理程序，则可以看到如何使用在以下代码行中调用.toDataURL（）函数：

If you look at the saveButton click handler, you can see how to get the base 64 image string with a call to the .toDataURL() function in this line of code:

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

这篇关于拖放图像转换为Base64的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！