Custom usage of edited image

CodePen example /at the bottom of this page/

More tricky way to use image editor (which is a part of Flmngr file manager) is to avoid uploading image result image and implement own logic of using it. You also can pass into image editor image other than a file from Flmngr storage: image editor will act as independent image editor and then you will decide what to do with the final file: open some custom saved dialog, pass into the app or something else.

This custom logic can be reached by using edit method. So after initializing flmngr intance object as usual, use its API method:

flmngr.edit({
    url: url, // your URL

    onSave: function(onExport, onClose) {
      // TODO: export and use image, close image editor dialog
    },
    onFail: function(error) {
      alert("Error: " + error);
    }
  });

So after user edited an image, it presses "Save" button in the image editor dialog and your code gets into onSave listener.

You can use onExport(name, ext, jpegQuality, callback) function to export the canvas as many times as you need (or just once as in this sample). Then call onClose() function to close the image editor.

Let's implement body of onSave() listener to export canvas of image editor dialog into Blob object and then convert it into Base64 to use in some image.

onExport(
    "new_name",
    "jpg",
    95,
    function(imageBlob) {

        // Convert image (Blob object) into Base64
        var reader = new FileReader();
        reader.onloadend = function() {
            var base64 = reader.result;                

            // Append a new image onto the document
            var elImage = document.getElementById("image"); // your image element
            elImage.src = base64;

            // Close image editor dialog
            onClose();
        }
        reader.readAsDataURL(imageBlob); 

    }
);

Of course you can decide not to convert result Blob into Base64 format, but use it somewhere else or upload the image somewhere into the storage by your code - this is up to you, implement the callback is you need.

What if you have some error while manipulating with the image (or in your custom save dialog user cancelled process, or something like that) and do not want to close the image editor dialog? Just do not call onClose() method, so you can wait until the edited image was really processed correctly or user cancels whole the editing process manually.

CodePen example

Demo
HTML
JavaScript
CSS
<h1 class="h5 mb-3">Flmngr 2: custom image editing</h1>

<p>
  <img id="image" 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.edit({
    url: decodeURI(document.getElementById("image").getAttribute("src")),

    onSave: function(onExport, onClose) {
      // You can use "onExport" function to export the canvas as many times as you need.
      // Call "onClose" function to close the image editor.
      onExport(
        "new_name",
        "jpg",
        95,
        function(imageBlob) {

          // Convert image (Blob object) into Base64
          var reader = new FileReader();
          reader.onloadend = function() {
            var base64 = reader.result;                

            // Append a new image onto the document
            var elImg = document.getElementById("image");
            var elImgNew = document.createElement("img");
            elImgNew.src = base64;
            elImg.parentElement.appendChild(elImgNew); 

            onClose();
          }
          reader.readAsDataURL(imageBlob); 

        }
      );

    },
    onFail: function(error) {
      alert("Error: " + error);
    }
  });
}
body {
  padding: 20px;
  background-color: #F4F4F4;
}

img {
  max-width: 500px;
}

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