Загружать изображения, используя только Javascript или nodejs для модификации на стороне клиента?

Question

Так что я делаю сайт как инструмент, который люди могут использовать для создания некоторых карт. Пользователи имеют возможность загружать свои собственные оборотные стороны всех карт. Однако я не могу узнать, как разрешить им загружать свои изображения.

Я не хочу сохранять загруженное изображение на сервер, только доступ к нему на стороне клиента.

Я посмотрел и обнаружил, что многие используют jQuery (не имеет и не использовал его раньше).
<input type="file"> Не работает как это не останется внутри выбора. <select><option><input type="file"></option></select> (отображается за пределами выбора, кажется, это не исправить)
И даже больше, что сохраняет IMG на сервере. (Я хочу, чтобы все было на стороне клиента)

Я использую browserify, поэтому NodeJS модули работают, но немногие, которые я нашел, требуют <input type="file">. Я бы поделился тем, что попробовал, но я пытался использовать только метод <input>, но он не удался, и я не знаю, что еще делать.

Моя конечная цель:

1. Загрузить изображение (не могу понять).
2. Скопировать изображение в pdf.
3. Разрешить пользователю загружать pdf.
4. Имейте все это на стороне клиента, чтобы серверу не приходилось напрягаться.

Answer 1

https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

Возможно, вы захотите прочитать вышеуказанный документ и изменить его в соответствии с вашими потребностями

Answer 2

Так что я нашел этот ответ по ссылке внутри ссылки внутри ссылки @Mukund Goel's anwser (bunny trail). Однако я не принимаю Mukund из-за того, что его ответ не решил мою проблему.

Итак, я выяснил, что мне нужно для этого: ссылка Я совершенно не думал, что используйте скрытый <input> тег.

Так что все, что мне нужно сделать, это сделать следующее:
( Я бы сделал этот фрагмент, но это не работает в фрагменты из-за необходимости )

    let hiddenInput = document.getElementById('hidden');
    let result = document.getElementById('result');
    let img = document.getElementById('result');
    document.getElementById('bttn').onclick = hiddenInput.click;
    document.getElementById('sel').onchange = hiddenInput.click;
    hiddenInput.onchange = function() {
      let file = this.files[0];
      if (!file.type.startsWith('image/')) return;
      const reader = new FileReader();
      reader.onload = (function(aImg) {
        return function(e) {
          aImg.src = e.target.result;
        };
      })(img);
      reader.readAsDataURL(file);
    }

    <input type="file" style="display:none" accept="image/*" id="hidden">
    <button id="bttn">Click Me</button>
    <select id="sel">
      <option>Or change me</option>
      <option>Choose me</option>
    </select>
    <img id="result">