DEV Community

artydev
artydev

Posted on

1 1

Taking photo from camera

I wanted to take a photo from my camera and modify the name of the input file button

You can test it here : Photo

<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>
Enter fullscreen mode Exit fullscreen mode

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)