Paste image, convert to base64 tag directly onto

Question

friendly notice: this question is a bit long.

codepen

The following is a tool which converts image into base64 markdown image tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="input"></textarea>
<textarea readonly placeholder="Base64 data" id="b64" rows="1" style="width:110px"></textarea>
<button onclick="enterBase64()">enter</button>

When a user pastes an image onto a certain location (where the cursor is blinking) in the <textinput id="input">, the image's data gets converted into base64 data and is shown in <textinput id="b64">,
and by clicking the <button>, ![]( and ) gets added to the back and front of the entire base64 data and gets pasted into <textinput id="input"> at the previously selected location.

now here are the scripts;

 $(document).ready(function() {
  $('#input').on('paste', function(e) {
    var orgEvent = e.originalEvent;
    for (var i = 0; i < orgEvent.clipboardData.items.length; i++) {
      if (orgEvent.clipboardData.items[i].kind == "file" && orgEvent.clipboardData.items[i].type == "image/png") {
        var imageFile = orgEvent.clipboardData.items[i].getAsFile();
        var fileReader = new FileReader();
        fileReader.onloadend = function() {
          $('#b64').html(fileReader.result);
        }
        fileReader.readAsDataURL(imageFile); break;
      }
    }
  });
});

(copied and edited from How do i get base64 encoded image from clipboard in internet explorer? )

this converts the pasted image into base64 data,

function enterBase64() {
insertAtCaret('input', "![](" + document.getElementById("b64").value + ")");return false;
}

this adds ![]( and ) at the front and back and then pastes the result to <textinput id="input">,

function insertAtCaret(areaId, text) {
  var txtarea = document.getElementById(areaId);
  if (!txtarea) {
    return;
  }
  var scrollPos = txtarea.scrollTop;
  var strPos = 0;
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));
  if (br == "ie") {
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart('character', -txtarea.value.length);
    strPos = range.text.length;
  } else if (br == "ff") {
    strPos = txtarea.selectionStart;
  }
  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);
  txtarea.value = front + text + back;
  strPos = strPos + text.length;
  if (br == "ie") {
    txtarea.focus();
    var ieRange = document.selection.createRange();
    ieRange.moveStart('character', -txtarea.value.length);
    ieRange.moveStart('character', strPos);
    ieRange.moveEnd('character', 0);
    ieRange.select();
  } else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
  }
  txtarea.scrollTop = scrollPos;
}

(copied and edited from Enter text into textinput by clicking button into where the cursor is )

and this enables a desired text pasted onto the desired location in <textinput id="input"> by clicking the button.

Basically, the tool works fine, but it requires two steps as stated above. My aim here is to make this process into one: To paste an image onto <textinput id="input"> and have its base64 markdown image data tag onto the cursor's location. <textinput id="b64"> and the button is no longer needed this way.

So how can I combine the second and third chunks of javascript into one and achieve this function?

Paste image, convert to base64 tag directly onto

friendly notice: this question is a bit long.

codepen

0 Answers0