JSFiddle - React, Tailwind, and code Playground

HTML

<body id="capture">
take a photo on your phone<br>
by clicking the button below:<br><br>

<input class="selfie" type="file" name="image" accept="image/*" capture="user">

<p></p>

<script   src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</body>

CSS

p{
  color: red;
  text-decoration:underline;
}
img{
  max-width:100px;
  max-height:100px;
}
canvas{
  border:2px solid red;
}

JavaScript

// Take a Portrait iPhone Photo
$('.selfie').change(function(e){
var filePath = URL.createObjectURL(e.target.files[0]);
$('body').append("<img src="+filePath+">")
$('p').append('click here to run html2canvas')
})

// Click to run HTML2CANVAS
$('p').click(function(){
html2canvas(document.getElementById("capture")).then(function(canvas){
document.body.appendChild(canvas);
})
})