JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <div class="contents" style="overflow-x:hidden; overflow-y:scroll;">


            <div style="width:100%; height:90%;">

            <canvas id="myCanvas" class="snap" style="width:100%; height:100%;" onclick="takephoto()"></canvas>


            </div>		
			
        </div>
        
        
        
        <p>
        This is the base64 image
        </p>
        
        <textarea id="base">
        
        
        </textarea>

JavaScript

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
  	  context.canvas.width = 1000;
      context.canvas.height = 1000;




var imageObj1 = new Image();

  imageObj1.src = "http://www.offthegridnews.com/wp-content/uploads/2017/01/selfie-psuDOTedu.jpg";
  imageObj1.onload = function() {
    context.drawImage(imageObj1, 0, 180, canvas.width, canvas.height);
  };

var imageObj2 = new Image();


  imageObj2.src = "http://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg"
  imageObj2.onload = function() {
    context.drawImage(imageObj2, 0, 0, canvas.width, 180);
  };
  
// get png data url
//var pngUrl = canvas.toDataURL();
  
var pngUrl = canvas.toDataURL('image/png');

// get jpeg data url 
 var jpegUrl = canvas.toDataURL('image/jpeg');


$('#base').val(pngUrl);