Open image editor directly from JavaScript code

CodePen example /at the bottom of this page/

ImgPen image editor is built into Flmngr file manager and in most of cases you do not need to call it manually due to its button is already inside file manager select files dialog - user will open image editor from there, edit an image and save it back to the server.

But when you need to call image editor outside of file manager context, you can do it using image editor API which is a part of Flmngr API.

With such API you can call image editor with image from your storage or outside of it, and then save result image into your storage or in other place, or just send it to your app UI and code yourself what to do with this image later.

Edit image inside the storage and upload it back

The most simple and common sample of using image editor is the case when user needs to edit some image on the server and then upload it back.

For implementing such feature in your app, you should use editImageAndUpload method. Initialize Flmngr instance object as in the sample of how to select files and then make editImageAndUpload() call:

flmngr.editImageAndUpload({
    url: urlOfYourImage, // insert your own
    onSave: function(urlNew) {

        // Do anything you want with a new image 
        elImg.setAttribute("src", flmngr.getNoCacheUrl(urlNew));

    },
    onFail: function(error) {
        alert("Error: " + error);
    }
});

This sample uses getNoCacheUrl() method to add ?no-cache=time suffix to the new URL because if user saved a new image rewriting the existing one, browser will not reload it until you refresh whole the page - this is a feature of all browsers. Fortunately Flmngr API has the method to bypass this pitfall.

CodePen example

Demo
HTML
JavaScript
CSS
<h1 class="h5 mb-3">Flmngr 2: edit and save image</h1>

<p>
  <img id="image" style="max-width:500px" src="https://fm.n1ed.com/files/paper.png" alt="Some image">
</p>

<div id="btn" class="btn btn-primary" style="opacity:0.2;cursor:default">Edit image...</div>
<div id="loading" style="font-size:12px">Loading file manager...</div>
window.onFlmngrAndImgPenLoaded = function() {

  var elBtn = document.getElementById("btn");

  // Style button as ready to be pressed
  elBtn.style.opacity = 1;
  elBtn.style.cursor = "pointer";
  var elLoading = document.getElementById("loading");
  elLoading.parentElement.removeChild(elLoading);

  // Add a listener for editing currently shown image
  elBtn.addEventListener("click", function() {
    editImage();
  });
}

function editImage() {

  // Create an instance object of flmngr, can be reused
  let flmngr = window.flmngr.create({
    urlFileManager: 'https://fm.n1ed.com/fileManager',
    urlFiles: 'https://fm.n1ed.com/files'
  });

  flmngr.editImageAndUpload({
    url: decodeURI(document.getElementById("image").getAttribute("src")),
    onSave: function(urlNew) {

      animateLoading();

      // Image edited, saved and uploaded to server: change the image
      // `getNoCacheUrl` will add `?no-cache=time` parameter to force image reloading in the browser
      var elImg = document.getElementById("image");
      elImg.setAttribute("src", flmngr.getNoCacheUrl(urlNew));

    },
    onFail: function(error) {
      alert("Error: " + error);
    }
  });
}

// Just for animating image while it is being reloading after change
function animateLoading() {
  var elImg = document.getElementById("image");
  var onLoaded = function() {
    elImg.classList.remove("loading");
    elImg.removeEventListener("click", onLoaded);
  }
  elImg.classList.add("loading");
  elImg.addEventListener("load", onLoaded);
}
body {
  padding: 20px;
  background-color: #F4F4F4;
}

#images .image {
  border: 1px solid #DDD;
  box-shadow: 5px 5px 0 0 #DDD;
  background-color: white;
  padding: 10px;
  display: inline-flex;
  flex-direction: column;
  margin: 0 25px 25px 0;
}
#images .image img {
  max-height: 350px;
  border: 1px solid #DDD;
}
#images .image p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #444;
}

@-webkit-keyframes loading-animation {
  50% {
    opacity: 0.3;
  }
}
@keyframes loading-animation {
  50% {
    opacity: 0.3;
  }
}
.loading {
  animation: loading-animation 1s infinite;
}