<div style="width:350px; 
 margin:0 auto; margin-top:50px;text-align:center;">

  <input style="display:none" type="file" id="photo" title="" 
 accept="image/*" capture="camera" onchange="takePhoto(event)" />

  <button  onclick="document.getElementById('photo').click()">
   Take a photo (on mobile) or Choose a file (desktop)
  </button>

  <div style="margin-top: 50px;">
  <img id="output" width="320" height="320"/>
  </div>
</div>


<script>
  let angle = 0;

  function rotate() {
    angle += 90;
    var img = document.getElementById('output');
    img.setAttribute('style', `transform:rotate(${angle}deg)`);
  }

  function takePhoto(e) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.addEventListener("click", () => rotate())
  }
</script>