JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" onchange="renderImage(event)">
<canvas id="myCanvas" width="300" height="300"></canvas>
<button onclick="saveOnPC()">Save on PC</button>
<button onclick="saveOnServer()">Save on Server</button>

CSS

canvas {
   border: 1px solid red;
}

input {
   margin-bottom: 6px;
}

button {
   margin: 10px 3px 0 0;
}

JavaScript

var canvas = new fabric.Canvas('myCanvas', {
   backgroundColor: 'white'
});

function renderImage(e) {
   var imgUrl = URL.createObjectURL(e.target.files[0]);
   fabric.Image.fromURL(imgUrl, function(img) {
      // set default props
      img.set({
         width: 150,
         height: 150,
         top: 75,
         left: 75,
         transparentCorners: false
      });
      canvas.add(img);
      canvas.renderAll();
   });
}

function saveOnPC() {
   var link = document.createElement('a');
   link.href = canvas.toDataURL();
   link.download = 'myImage.png';
   link.click();
}

function saveOnServer() {
   $.post('https://your-site-name.com/save-image.php', {
      data: canvas.toDataURL()
   }, function() {
      console.log('Image saved on server!');
   });

   /* use the following PHP code for 'save-image.php' on server-side

   <? php
   $img = $_POST['data'];
   $img = str_replace('data:image/png;base64,', '', $img);
   $img = str_replace(' ', '+', $img);
   $fileData = base64_decode($img);
   $fileName = 'myImage.png';
   file_put_contents($fileName, $fileData);
	
	*/
}