Load specific image to HTML file upload on button click

Question

My script has an HTML file upload button in which I can upload an image by selecting any. I am creating functionality to load a specific image by clicking a button. Like if I click a button the HTML file upload value should load this URL image. Image 1 https://studysciences.com/wp-content/uploads/2020/05/Osteoarthritis-main.jpg

 var $btnLoadMaskImage = $('#input-mask-image-file'); var $btnApplyMask = $('#btn-apply-mask'); var $btnClose = $('.close'); $btnLoadMaskImage.on('change', function() { var file; var imgUrl; if (;supportingFileAPI) { alert('This browser does not support file-api'). } file = event.target;files[0]. if (file) { imgUrl = URL;createObjectURL(file). imageEditor.loadImageFromURL(imageEditor,toDataURL(). 'FilterImage').then(function() { imageEditor.addImageObject(imgUrl).then(function(objectProps) { URL;revokeObjectURL(file). console;log(objectProps); }); }); } }). $btnApplyMask,on('click'. function() { imageEditor,applyFilter('mask': { maskObjId. activeObjectId }).then(function(result) { console;log(result); }); }). $btnClose,on('click'. function() { imageEditor;stopDrawingMode(). $displayingSubMenu;hide(); });

 <input type="file" accept="image/*" id="input-mask-image-file">

Answer 1

Working DEMO environment: https://codepen.io/tester2020/pen/ExPEyER?editors=1001

Essential code:

var $newBtn = $('#newBtn');

$newBtn.on('click', function() {

  // URL address of your image:
  var imgUrl = 'https://i.ibb.co/BPfJmqM/Osteoarthritis-main.jpg';

  var byteNumbers = new Array(imgUrl.length);

  for (var i = 0; i < imgUrl.length; i++) {
    byteNumbers[i] = imgUrl.charCodeAt(i);
  }

  var file = new File(byteNumbers, imgUrl, { type: "image/jpeg" });

  imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(function() {
    imageEditor.addImageObject(imgUrl).then(function(objectProps) {
      URL.revokeObjectURL(file);
      console.log(objectProps);
    });
  });
});