0

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">
WeDevelop
  • 99
  • 1
  • 11
  • looking for this answer https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded? – DVN-Anakin Jul 06 '20 at 16:21
  • No, actually the file upload functionality is working fine but I want a specific image to load on button click. I don't want to browse and then select an image – WeDevelop Jul 06 '20 at 16:32
  • can't u just append `` into some `
    ` element on click?
     – DVN-Anakin Jul 06 '20 at 16:37
  • or u can put the image into html but make it hidden, then u can make it vissible when user clicks on the button – DVN-Anakin Jul 06 '20 at 16:45
  • This is my script url: https://nhn.github.io/tui.image-editor/latest/tutorial-example02-useApiDirect we can upload image using mask button but I want another button here which can upload an specific image by clicking on it – WeDevelop Jul 06 '20 at 17:54

1 Answers1

0

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);
    });
  });
});
DVN-Anakin
  • 342
  • 1
  • 6
  • https://ibb.co/ZKKCgXt it shows this error now. If I click on button – WeDevelop Jul 06 '20 at 21:16
  • https://ibb.co/tPNxkfN it generates an URL like this "Error loading blob:http://editor.studysciences.com/e8777d7f-f2d3-49ea-b142-1617bd3f1e8b" – WeDevelop Jul 06 '20 at 21:34
  • But what line of your code is causing the error? Click on `http://fabric.js:974/` to see what line of code is causing the error. You have to know what exactly is causing the error before fixing it. – DVN-Anakin Jul 06 '20 at 21:36
  • https://ibb.co/W69w89f there is no any error there. :-| – WeDevelop Jul 06 '20 at 21:38
  • can't we assign the URL of the image to the value of HTML file upload on button click? so that file uploader could automatically create the image to the canvas – WeDevelop Jul 06 '20 at 21:42
  • I don't have access to your codebase so I don't know what params are those function accepting. What happens if you comment this line: `imgUrl = URL.createObjectURL(file);` in my code? Like this: `// imgUrl = URL.createObjectURL(file);` or just simply remove that line – DVN-Anakin Jul 06 '20 at 22:06
  • Brother, I created the environment. https://jsfiddle.net/06aLj89d/1/ Please guide me. Thanks – WeDevelop Jul 06 '20 at 22:39
  • @WeDevelop See my code above and the demo - it works now, but if your website is not on the domain `https://studysciences.com/`, then you will have to host your image somewhere else - for example here on `imgbb.com`: https://ibb.co/n0wyTzJ – DVN-Anakin Jul 07 '20 at 00:39
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/217341/discussion-between-wedevelop-and-dvn-anakin). – WeDevelop Jul 07 '20 at 01:20